New Participant

Solved

Access custom page property from js file in aem

Forum|Forum|1 year ago
July 30, 2024
4 replies
999 views

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

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;

kautuk_sahni

Employee

@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

EstebanBustamante

New Participant

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

kapil_rajoria

New Participant

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
    }
});

h_katariaAccepted solution

New Participant

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;

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded