Expand my Community achievements bar.

Modify dialog value after dialog submission in AEM

Avatar

Level 4

We want to get the input from page dialog(multifield) and add some prefix string(hardcode) before store the value in node. like /hardcodevalue/{dialogvalue} and store the value in node. Can we use any listeners to do this or what is the approach that should follow? please share any reference.

7 Replies

Avatar

Community Advisor

@Anderson_Hamer 

You can use the Coral UI to get the Multifield data in Jquery and calling a servlet from the same Jquery where you can use the node api to save the modified data on the same multifield resource.

The listener that will help you will be $(document).on(“click”, “.cq-dialog-submit”, function(e) 

Please refer CoralUI in AEM
to get the multifield data in Jquery using CoralUI


Hope this procedure helps!!

Thanks,
Nikhil




Avatar

Level 4

Can this be done without a servlet ? there is no complex in backend. just want to prefix some hard coded value /hardcodevalue/{dialogvalue}

Avatar

Community Advisor

If you will save the values on different place that means at /hardcodevalue/{dialogvalue} then you may face problem while retrieving values when dialog will be opened for editing again.

What is your use case?



Arun Patidar

Avatar

Level 4

No, I am not string the value in different location. same place with hard coded prefix value.

Avatar

Community Advisor

Hi @Anderson_Hamer 

I would suggest create a hidden field in the dialog(granite/ui/components/coral/foundation/form/hidden) and set the value before submitting the dialog.

AG

Avatar

Level 8

Hi @Anderson_Hamer 

You can achieve this with dialog listeners, please refer below code for the same.

 

Dialog field : 

<textInput
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Configure Text"
fieldLabel="Text"
granite:class="concat-txt-input"
name="./textInput"/>

 

Add listener js code with clientlib category mentioned below :

(function ($, $document) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
var $concatTextInput = $('.concat-txt-input');
var $inputVal = $concatTextInput.val();

if($inputVal.val()){
var prefix = '/hardcodevalue/';
$concatTextInput.val(prefix+$inputVal); //before submit concatenate input value with prefix
}
});
})($, $(document));
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="cq.authoring.dialog"/>

 

Hope this helps!

Avatar

Level 1

Thanks @Manjunath_K the above code is working fine but the 

 $concatTextInput.val(prefix+$inputVal);

is updating the same/only one value to all the input fields under mutifield.