Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM : Access to global values from dialog-clientlib

infinityskyline
Level 2
Level 2

Currently, I am storing certain value as in data-attributes in customheaderlibs.html

<div data-sly-use.myjava="MyJava"
     data-score="${myjava.getScore}"
     data-team="${myjava.getTeam}"></div>

and were reading these values by

const iframeContents = document.querySelector('iframe').contentWindow.document.body;
        const configElement = iframeContents.querySelector('div[data-score]');

 

This works fine for certain resolution of a screen. But in smaller viewport such as in iPad where cq dialog opens as a full screen and not as a dialog box, customheaderlibs.html seems to be absent from the DOM. Hence, these data cannot be accessed from javascript on dialog-ready. Is there any way these data can be accessed, may be if passed as query parameter to the granite dialog path? But not sure how to achieve this. 

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@infinityskyline, maybe you can create a servlet that would be called by your cq.authoring.editor.hook client library. Right, and reviewing your custom JavaScript code, when writing custom logic for cq.authoring.editor.hook, and you should tick to ES5 syntax, as ES6 syntax is not yet supported by browsers like IE11. 

 

<?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"
    allowProxy="{Boolean}true"
    categories="[cq.authoring.editor.hook]"
    dependencies="[cq.authoring.editor.core]"/>

 

 // the client library js file

 

$.get( "/bin/mycustomservlet", function( response ) {
    // do something with the response
});

 

 

View solution in original post

7 Replies
Arun_Patidar
Community Advisor
Community Advisor

Hi,
I would suggest to read this value in dialog using ajax call on dialog-load.

you can simply make a call to same page with div id/class to get the custom data-attribute DOM.

check Loading Page Fragments part on https://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-load.php

 

BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@infinityskyline, maybe you can create a servlet that would be called by your cq.authoring.editor.hook client library. Right, and reviewing your custom JavaScript code, when writing custom logic for cq.authoring.editor.hook, and you should tick to ES5 syntax, as ES6 syntax is not yet supported by browsers like IE11. 

 

<?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"
    allowProxy="{Boolean}true"
    categories="[cq.authoring.editor.hook]"
    dependencies="[cq.authoring.editor.core]"/>

 

 // the client library js file

 

$.get( "/bin/mycustomservlet", function( response ) {
    // do something with the response
});

 

 

View solution in original post

infinityskyline
Level 2
Level 2

@BrianKasinglihttp://localhost:4502/bin/mycustomservlet?_=1610179346273 is not accessible throwing 404. Checked config manager /bin/ is there in the execution path. But the servlet is not present in the project bundle.

BrianKasingli
Community Advisor
Community Advisor
Of course it does not work. You will need to create this custom servlet which will return in response a JSON with data-score and data-team... however, a second thought, your JavaScript should be able to access the Document Object Model, so you should be able to call something like document.getElementBy... and it should work. There's many ways of doing this, but I was thinking of a way to pass the data to JavaScript, so I suggested a servlet.
infinityskyline
Level 2
Level 2

@BrianKasingliyes I did create a servlet with "sling.servlet.paths=" + "/bin/mycustomservlet" . And your second opinion is something which I was doing previously but unfortunately for a certain resolution when a cq dialog open full screen page content is not there in the DOM and just the dialog html is there so not able to access the DOM to which these values are attached.

But it worked atlast.. There was some build problem, got it sorted. Thanks

KiranVedantam1992
Community Advisor
Community Advisor

Hi @infinityskyline,

 

If I understand your query correctly, you are trying to access the HTML elements in JS. Please refer to my answer here.

Hope this helps.

 

Thanks,

Kiran Vedantam

Anudeep_Garnepudi
Community Advisor
Community Advisor

@infinityskyline 

One way I can think of is, If the values of score, team are stored in node, then get the form action attribute and hit with .json extension and read the values of score and team.

$.ajax({
    url: $("form.cq-dialog").attr("action") + ".json",
    async: false,
    success: function (data) {
        console.log(data.score);
    }
});

One more way is, if you use Sling Model (I see you are using Use API here in example) and even if values of score, team are not stored as part of node you can hit the same action attr path with model selector and JSON extension you can get values.

$.ajax({
    url: $("form.cq-dialog").attr("action") + ".model.json",
    async: false,
    success: function (data) {
        console.log(data.score);
    }
});