How to fetch Page Properties in JS in AEM 6.2 | Community
Skip to main content
karansheel
karansheel
Level 3
November 27, 2017
Solved

How to fetch Page Properties in JS in AEM 6.2

  • November 27, 2017
  • 2 replies
  • 15788 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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

    2 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    November 27, 2017

    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

    Kautuk Sahni
      T
      thomasm46556898
      Level 2
      October 13, 2022

      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
        Adobe Employee
        Feike_Visser1Adobe Employee
        Adobe Employee
        November 27, 2017

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

        Terms & ConditionsAccessibility statement

        Loading footer...