Access custom page property from js file in aem | Community
Skip to main content
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 h_kataria

There are multiple ways. One example would be to just add the property as hidden input within your page component.

 

<input type="hidden" class="customprop" name="customprop" value="${inheritedPageProperties.custompropertyname}"/>

 

And then simply access it in your js

 

var customprop = document.querySelector(".customprop").value;

 

4 replies

h_kataria
Community Advisor
h_katariaCommunity AdvisorAccepted solution
Community Advisor
July 30, 2024

There are multiple ways. One example would be to just add the property as hidden input within your page component.

 

<input type="hidden" class="customprop" name="customprop" value="${inheritedPageProperties.custompropertyname}"/>

 

And then simply access it in your js

 

var customprop = document.querySelector(".customprop").value;

 

    kapil_rajoria
    Community Advisor
    kapil_rajoriaCommunity Advisor
    Community Advisor
    July 30, 2024

    Hi @silviaba1 you can render the property in your HTML using data attribute. For Example:

     

    <div class="page" data-custom-property="${inheritedPageProperties.custompropertyname}"> </div>

     


    To use it in the javascript/Jquery you can use:

     

    //javascript const pageElement = document.querySelector('.page'); const customProperty = pageElement.getAttribute('data-custom-property'); console.log(customProperty); //jquery var customProperty = $('div').data('custom-property'); console.log(customProperty);

     


    Approach-2
    For complex scenerios, you can also do this using a servlet and then use ajax to get the data in front-end:

     

    import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class CustomPropertyServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Get current page Page currentPage = request.getResourceResolver().adaptTo(PageManager.class).getContainingPage(request.getResource()); // Access custom property String customProperty = currentPage.getProperties().get("custompropertyname", String.class); // Send response response.setContentType("text/plain"); response.getWriter().write(customProperty); } }//use ajax to get the custom attribute $.ajax({ url: '/bin/your-servlet-path', type: 'GET', success: function(data) { console.log(data); // Custom property value } });

     

      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      July 30, 2024

      Hi, 

      You cannot access inheritedPageProperties from JavaScript directly because it is server-side data. As explained, you either need to expose the server-side data (inheritedPageProperties) in your HTML markup and then access it via JavaScript, or use a service that retrieves this information from the backend.

       

      The other answers provide examples on how to achieve this.

       

      Hope this helps!

      Esteban Bustamante
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        August 1, 2024

        @silviaba1 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...