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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to fetch Page Properties in JS in AEM 6.2

Avatar

Level 3

Hi,

i have a requirement in which i have to disable a dialog property on the basis of a property in jcr:content node. To implement this i have written a custom js. Problem is i'm not able to get page property value in JS . i'm using below code (it seems it doesn't work for Touch UI)

$(document).on("dialog-ready", function () {   

var pageData = CQ.HTTP.get(CQ.HTTP.externalize(CQ.utils.WCM.getPagePath() + "/jcr:content.json"));

    var producMaster = pageData ? CQ.Util.formatData(CQ.HTTP.eval(pageData))['cq:productMaster'] : null;

    alert(producMaster);

}

I have also tried this one also

$(document).on("dialog-ready", function () {

granite.resource.properties["cq:productMaster];

}

but it shows message granite can't be resolved

Can anyone help here how i can read page properties.

1 Accepted Solution

Avatar

Correct answer by
Administrator

It would not work in any JS file like this.

Please refer to HTL JavaScript Use-API  (these are server side JS)

Here info.js

/apps/my-example/component/info/info.js

     "use strict";

     use(function () {

         var info = {};   

         info.title = granite.resource.properties["title"];

         info.description = granite.resource.properties["description"];   

         return info;

     });

and for passing data to client....

Read "Passing Data to the Client" Getting Started with HTL

you need to create an server side JS file like info.js and another JS(client side) can access that attribute.

~kautuk

View solution in original post

3 Replies

Avatar

Correct answer by
Administrator

It would not work in any JS file like this.

Please refer to HTL JavaScript Use-API  (these are server side JS)

Here info.js

/apps/my-example/component/info/info.js

     "use strict";

     use(function () {

         var info = {};   

         info.title = granite.resource.properties["title"];

         info.description = granite.resource.properties["description"];   

         return info;

     });

and for passing data to client....

Read "Passing Data to the Client" Getting Started with HTL

you need to create an server side JS file like info.js and another JS(client side) can access that attribute.

~kautuk

Avatar

Level 2

This answer needs to be updated for AEM 6.5 and the link also points to a page that doesn't give any information on how to do this in JavaScript.

If you're looking to do this in the current version of AEM, then the op's code works but needs a tweak. Below is an example that will work to get you the page properties in JavaScript for a CQ Dialog.

(function(document, $) {
    var pagePath = `${CQ.shared.HTTP.getPath().replace('/editor.html', '')}/jcr:content.json`;
    var extPagePath = CQ.shared.HTTP.externalize(pagePath);
    var pageData = CQ.shared.HTTP.get(extPagePath);
    var pageObj = CQ.shared.Util.eval(pageData);

    $(document).on('dialog-ready', () => {
        console.log(`Page ID is: ${pageObj['id']}`);
    });
})(document, Granite.$);