Access custom page property from js file in aem

[silviaba1]

Hi,

I need to access custom page property in aem from js file.

From HTL I'm able to access it using inheritedpageproperties.custompropertyname.
However my requirement is to access it from js file. Any help is appreciated. Thank you

[h_kataria · Accepted solution]

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]

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]

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!

[kautuk_sahni]

@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!