Page properties in JS file for adobe data layer

[manikanthar1295]

Hi Team,

I need help how to get page properties in JS file.

for example we have page property called siteName then i need to get that JS file.

If Site name is not present in page then we need to get from its parent(Inherited page properties)

Regards

Manikantha R

[Ganthimathi_R]

Hi @manikanthar1295 

You can read the page properties in JS file by making ajax call to a backend servlet and add logic in servlet to read the properties via JCR API.

Hope it helps !

[joerghoh · Accepted solution]

The WCM Core components support an explicit datalayer, but the majority of the computation happens on rendering time, so the complete JSON structure is directly available within the page. See https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/data-lay...

If you cannot the Core Components, you can copy the approach used there and adopt it. In my opinion it's quite good and scalable.

[mahi1729]

Like @joerghoh mentioned, based on title or your post I assume you are using core components and use Adobe data layer. Now you can use delegation pattern to additionally add more properties that can either be consumed by HTL code (you can choose to include as part of custom header libs.html) to expose the site name property as a data attribute and then in your js you can read the data attributes from there or directly override the data layer generation method in your custom page implementation so your js can directly consume it from the generated data layer.

But let's say you don't use Adobe data layer. In that case also you can still add your logic in customheaderlibs.html using HTL code to directly inject a script block (context will be script or script variable I guess) with values available via page properties or inherited page properties global objects. And now that it is available as a js variable you can directly consume it in another js to update data later with this value.

Point is with custom js and HTL exposing the property, there were many ways. 

Hope these insights help you. 

Thanks 

[arunpatidar]

You can simply read those properties in the HTL (via page model etc) and put it in the script tag or data attribute/meta tags and then whenever you need this, you can read it.