How to fetch Page Properties in JS in AEM 6.2

[karansheel]

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.

[kautuk_sahni · Accepted solution]

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

[thomasm46556898]

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.$);

[Feike_Visser1]

can't you do pageProperties.get("propx", String.class)