Component beforeedit

[AEMnewbie]

I have a listener for a component on a page . When i try to edit the component 

<cq:listeners
    jcr:primaryType="cq:EditListenersConfig"
    beforeedit="function() {console.log('Test')"
    afteredit="REFRESH_PAGE"/>

The after edit  works fine and it refreshes the page after edit , but the before edit isnt working as expected . I have multiple components on the page and the new component should read a value from previous created component on the page .. I am trying to pick a value from last created component and use it in the newly created component. Am i missing something which is causing the beforeedit to fail , or is there any other way to achieve this?

[Asutosh_Jena_]

Hi @AEMnewbie 

Please see an article on the listeners explained very well with example:

http://www.sgaemsolutions.com/2019/01/ootbcustom-cqlisteners-in-cqeditconfig.html

Hope this helps!

Thanks

[AEMnewbie]

@Asutosh_Jena_  - I did look at that article -- And i was able to make afteredit work- but the beforeedit isnt working

[Asutosh_Jena_]

I just tried and can see the code executed.

alert("Hi")

[AEMnewbie]

@Asutosh_Jena_ - Are you saying you tried that alert for beforeedit and it is working?

[Asutosh_Jena_]

Yes you are correct.

[Umesh_Thakur · Accepted solution]

Hi @AEMnewbie,

I think you can use jquery based dialog state function to accomplish your requirement instead of listeners here easily you can make a call to get the data from back-end an all list of the events you can find in @Nikhil's blolg at https://aemsimplifiedbynikhil.wordpress.com/2018/07/30/touchui-dialog-listeners-aem-6-3/

and one implemented solution you can find below:

Here we are making an ajax call to a servlet to read some data from a node in crx and assigning the same value to a dialog filed before edit.

Hope this will help.

Umesh Thakur

[AEMnewbie]

@Umesh_Thakur - Thanks Umesh ! Let me give this a short

[AEMnewbie]

@Nikhil-Kumar@Umesh_ThakurThe above approach seems to be working .Although ..I am still trying to figure out how i can get/set the form values ..

(function ($, $document) {
    'use strict';
    $document.on("dialog-ready", function(e) {
             var $formminmax = $(this).closest("form.foundation-form");
             var idSelector = $formminmax.find("[name='./heading2']").val();
             console.log('test');
             console.log($("form[name='./heading1']").value);//throws undefined
             console.log(idSelector);//throws undefined
             console.log(Granite.author.DialogFrame.currentDialog.editable.path);// This is helpful to get the current dialog path
            });
})($, $(document));

So far i verified the part where its logging the data to the content .. Once i know how to read/set the form values - I can make an ajax call to the required value.

[Umesh_Thakur]

In above snipet at line #16 we are getting a value from dialog field with name ./schemaLogo and at line #19 we are assigning a value to the same dialog field from the ajax response. Hope this will help you out.

[Prince_Shivhare]

Hi @AEMnewbie ,

We had the same use case regarding the multifield. if you want to do it with the component-wise. then it would be difficult for you.

- if you want to use the last component content into the newly created then you will have to use the last authored component classes or if want to use custom class then granite:class on the field level would work.

- once you get the classes, use these classes to write a custom js.

- your component values are saved in DOM, now use js function queryselector OR queryselectorall and fetch those properties and set it to the new component.

- logic may vary with the use case.

This weekend we are coming with an article for this.

https://www.w3schools.com/jsref/met_document_queryselector.asp

https://www.w3schools.com/jsref/met_document_queryselectorall.asp

Thanks,

Prince

[Ritesh_Mittal]

@AEMnewbie ,

I see a closing "}" missing at the end of function. Try is that resolves the issue.

[AEMnewbie]

@Ritesh_Mittal - I just fatfingered while posting it ..I do have the closing "}" in my code