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

AEM : Access to global values from dialog-clientlib

Avatar

Avatar
Validate 1
Level 1
infinityskyline
Level 1

Like

1 like

Total Posts

15 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
infinityskyline
Level 1

Like

1 like

Total Posts

15 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
infinityskyline
Level 1

08-01-2021

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. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

08-01-2021

@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
});

 

 

Answers (3)

Answers (3)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

08-01-2021

@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);
    }
});

 

Avatar

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

190 likes

Total Posts

205 posts

Correct Reply

60 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

190 likes

Total Posts

205 posts

Correct Reply

60 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile
KiranVedantam1992
Level 7

08-01-2021

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,304 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,304 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

08-01-2021

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