Read Page Property(json data)

Question

added a jsondata property in page property now i want to read that json data page property and according to that json i want to render some dropdown field in a custom component i created

VikasChaudhary_ · Accepted Answer

Hi @knki ,

Please follow this blog to understand how you can load a dropdown list on a dialog dynamically using granite datasource: https://unlocklearning.in/dynamic-dropdown-in-aem/#elementor-toc__heading-anchor-4

However, the use case you have is a little different, in the blog you'll find that the json is stored at a particular path but in your case it is present as a page property. You can change the implementation of the JsonDataDropdownServlet to fetch the JSON from page properties instead of fetching is from the jsonDataPath property, you can ignore the jsonDataPath property altogether.

Hope it helps.

-Vikas Chaudhary

Kamal_Kishor · Answer

@knki : You can try with a javascript based approach as well.

1. Create a dropdown field in your custom component.
2. Create component specific clientlib and load it using extraClientlibs property.
3. In your clientlib, read jsondata property value from page properties.
4. Parse jsondata property value and append the dropdown values into dropdown field by making use of property-name of dropdown field in your component.

To read page properties in your javascript, you can make an ajax call from your JS to jcr:content path of the page and extract the jsondata from ajax response.
You can refer this for guidance on how to append dynamic values into dropdown field: https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html

Sign up

Login with SSO

Login to the community

Login with SSO