Read Page Property(json data)

[knki]

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 solution]

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]

@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

[kautuk_sahni]

@knki Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.