REFRESH_PAGE with TOUCH UI Asset Page Properties submit/done button... cq:editconfig cq:listeners?

[cqvoyager]

Hello Team,

I have a requirement to upload the csv file containing the tags, so chosing the csv file from path browser and on click of done of the asset page properties, Im calling the back end servlet through the ajax call and processing the tags from the csv and adding them under jcr:content/metadata/cq:tags. Every thing is functioning correctly.

Since my ajax call processing is independent of the out of the box asset page properties dialog submission, even though jcr:content/metadata/cq:tags are correctly added, user has to refresh the page to see the uploaded tags from the csv file. I was looking for auto refresh once the page properties is submitted. 

Here schema editor page properties in touch UI is following the granite structure to define the /apps/dam/content/schemaeditors/forms/mysite/items structure similar to /libs/dam/content/schemaeditors/forms/forms/aem-authored/items/

I was not sure what is the best way to achieve my requirement? Any suggestions/pointers would be helpful. cq:editconfig and cq:listeners I looked it into but its with the context of component dialog.. in this case its not a dialog.. Please suggest.

Thanks...

[smacdonald2008]

DId you try refreshing the page when AJAX is successful:

http://stackoverflow.com/questions/2027931/how-to-refresh-page-with-jquery-ajax

[cqvoyager]

Thanks @scott for your response. Explicitly reloading the page works through javascript.

Only caveat is since my ajax and out of box page properties submission are independent activities ideally, I would like to refresh the page only after out of box page properties submission is successfully completed.(i.e in other words afteredit functionality of cq:listeners sort of)

In this case if my ajax servlet call is completed first, I might end up refreshing the page when the actual page properties submission is in process. I think page properties submission is a back ground process and should not be affected with page refresh. Ideally its not the perfect solution for this usecase.

If I know some way dialog-success/afteredit is completed or some sort of call back mechanism once the page properties submission is done. there ideally I can refresh the page as you suggested.

Thanks!

[kautuk_sahni]

Hi 

You are right, "if my ajax servlet call is completed first, I might end up refreshing the page when the actual page properties submission is in process".

The solution to this problem is to call refreshing once page property submission happens. So we need to have event listener for page property dialog submission.

Please have a look at this Helpx article:- https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

//

Add a dialog to the AEM Touch UI component  

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article illustrates dialog events.  The following dialog events are used in this article:

dialog-ready - fires when the dialog is ready
click  -fires when the user clicks on the dialog
dialog-closed - fires when the dialog is closed
A dialog that is built for the Touch UI is defined by using nodes of type un:structured. You define the type of control on the Touch UI dialog by setting the node's sling:resourceType property. For example, to define a text field on a Touch UI dialog, set the  sling:resourceType property to granite/ui/components/foundation/form/textfield.

$document.on("dialog-closed", function() {
        $(window).adaptTo("foundation-ui").alert("Close", "Dialog closed, event [dialog-closed]");
    });

I hope this will help you.

Thanks and Regards

Kautuk Sahni

[cqvoyager]

Thanks @kautuk for your response.  Unfortunately none of the dialog events are firing/working when I am editing the page properties from sites.html

When navigating to individual page for eg: http://localhost:4502/editor.html/content/geometrixx/en.html and click on page properties, it opens the dialog of page properties. and all my dialog events are working.

Whereas if we go to same page properties from sites.html, http://localhost:4502/libs/wcm/core/content/sites/properties.html/content/geometrixx_mobile/en, then its opening a dialog/form with page properties but dialog events are not firing.

Same issue editing the assets from below path, dialog events are not firing.
http://localhost:4502/mnt/overlay/dam/gui/content/assets/metadataeditor.html/content/dam/geometrixx/...

When I dig into it little further, when I go from editor.html(http://localhost:4502/editor.html/content/geometrixx/en.html), class is cq-dialog and thats the reason dialog events are firing.

<form action="/content/geometrixx/en/_jcr_content" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form foundation-layout-form-mode-edit cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/geometrixx/en.html" data-foundation-form-ajax="true" style="top: 38.5px; left: 485px;">

When I go from sites.html the same page(http://localhost:4502/libs/wcm/core/content/sites/properties.html/content/geometrixx/en), there is no cq-dialog as part of the class. Thats the reason probably dialog events are not firing.

<form id="propertiesform" class="cq-siteadmin-admin-properties foundation-form coral-Form coral-Form--vertical foundation-layout-form foundation-layout-form-mode-edit" action="/content/geometrixx/en/_jcr_content" method="post" data-foundation-form-redirect="/libs/wcm/core/content/sites/properties.html?item=%2fcontent%2fgeometrixx%2fen" data-foundation-mode-group="cq-siteadmin-admin-properties" data-foundation-form-ajax="true" data-foundation-form-loadingmask="true" data-foundation-form-output-replace=".foundation-content">

Please suggest if you have any pointers to solve this.

[kautuk_sahni]

Hi 

Workaround for calling something when page property dialog (for:page properties from sites.html) closes:-

Overlay:-  "/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/form/response/ui/success/foundation.reload.js"

$(window).adaptTo("foundation-registry").register("foundation.form.response.ui.success", {
        name: "foundation.reload",
        handler: function(form, config, data, textStatus, xhr) {
            saveMessage(config.message || Granite.I18n.get("The form is submitted successfully"));
            window.location.reload();
        }
    });

Here inside Hendler Function you can do anything.

I hope this will help you a bit.

Thank and Regards

Kautuk Sahni

[cqvoyager]

Thanks @Kautuk for your response.

I'm not sure which AEM version you are on? I m not seeing the path you provided in the /libs for me to overlay.

Overlay:-  "/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/form/response/ui/success/foundation.reload.js"

I'm using AEM 6.1 and SP1. Please suggest.

Thanks.

[kautuk_sahni]

cqvoyager wrote...

Thanks @Kautuk for your response.

I'm not sure which AEM version you are on? I m not seeing the path you provided in the /libs for me to overlay.

Overlay:-  "/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/form/response/ui/success/foundation.reload.js"

I'm using AEM 6.1 and SP1. Please suggest.

Thanks.

Oh!! Sorry, i shared it for 6.2. Let me work on this for 6.1 and will get back to you soon.

[cqvoyager]

if you could provide the AEM 6.1 path, it would be really helpful. Thanks!