Page properties not producing output

[valcohen]

I'm trying to get data from page properties into a data- attribute in the HTML, so I can access the data from front-end code. I've tried two styles of property name -- one "bare" name defaultTitle and one with a dot to help organize it, contact.defaultTitle -- and two styles of access, referencing properties and inheritedPageProperties. I've authored both properties and verified the keys & values in the JCR.

When I use data-sly-list to loop over both the properties and inheritedPageProperties, I see all the properties I expect, including my two title props.

But when I try to refer to the properties directly -- in an HTML attribute, or as the content of an HTML element -- only one of the four styles produces output. Why? 

Markup:

<div class="get-in-touch-form"
    data-default-titleIPropDef="inheritedPageProperties.defaultTitle: ${inheritedPageProperties.defaultTitle}"
    data-default-titleIPropContactDef="inheritedPageProperties.contact.defaultTitle: ${inheritedPageProperties.contact.defaultTitle}"
    data-default-titlePropDef="properties.defaultTitle: ${properties.defaultTitle}"
    data-default-titlePropContactDef="properties.contact.defaultTitle: ${properties.contact.defaultTitle}"
>
<pre>
'defaultTitle'
iprop default: ${inheritedPageProperties.defaultTitle}
 prop default: ${properties.defaultTitle}

'contact.defaultTitle'
iprop default: ${inheritedPageProperties.contact.defaultTitle}
 prop default: ${properties.contact.defaultTitle} 
</pre>
<h3>inheritedPageProperties</h3>
<ul data-sly-list.iprop="${inheritedPageProperties}">
    <li>iprop ${iprop} - ${inheritedPageProperties[iprop]} ;</li>
</ul>
<h3>properties</h3>
<ul data-sly-list.prop="${inheritedPageProperties}">
    <li>prop ${prop} - ${inheritedPageProperties[prop]} ;</li>
</ul>

Output (I removed all the properties produced by the loop except the ones in question; the entire list of properties renders correctly):

<div class="get-in-touch-form" 
    data-default-titleIPropDef="inheritedPageProperties.defaultTitle: Winnie the Pooh" <-- OK
    data-default-titleIPropContactDef="inheritedPageProperties.contact.defaultTitle: " <-- MISSING
    data-default-titlePropDef="properties.defaultTitle: "                              <-- MISSING
    data-default-titlePropContactDef="properties.contact.defaultTitle: "               <-- MISSING
    data-page-title="WorkLife at Irvine Towers®" foo="bar">

<pre>
'defaultTitle'
iprop default: Winnie the Pooh  <-- OK
 prop default:                  <-- MISSING

'contact.defaultTitle' 
iprop default:                  <-- MISSING 
 prop default:                  <-- MISSING 
</pre>
<h3>inheritedPageProperties</h3>
<ul>
    <li>iprop defaultTitle - Winnie the Pooh ;</li>           <-- OK
    <li>iprop contact.defaultTitle - And Tigger, Too! ;</li>  <-- OK
</ul>
<h3>properties</h3>
<ul>
    <li>prop defaultTitle - Winnie the Pooh ;</li>            <-- OK
    <li>prop contact.defaultTitle - And Tigger, Too! ;</li>.  <-- OK
</ul>

[arunpatidar]

Hi,

Use pageProperties from https://experienceleague.adobe.com/docs/experience-manager-htl/content/global-objects.html?lang=en

 prop default: ${pageProperties.defaultTitle}

[milind_bachani]

Please make use of global sightly object: pageProperties

This will return you the properties relevant to the page where you are having the markup/ component.

Refer this tutorial : https://www.youtube.com/watch?v=GEiGIAgV0NY

for more understanding on global objects in sightly.

[valcohen]

Thanks for the video link -- I normally don't like them for documentation but this one is short, to the point and has clear explanation and examples.

[valcohen · Accepted solution]

So I had a syntax error, and an error in my test harness. It turns out both inheritedPageProperties and pageProperties work, as expected. 

When I referenced the property contact.defaultTitle, I just added that string to the container name, e.g. pageProperties.contact.defaultTitle -- but the dot is an operator in that context. To treat it as part of the property name, I needed to address it in bracket notation: pageProperties['contact.defaultTitle']

The other error was simply a copy/paste bug in the test markup; I used the same global in both cases.