Page Properties in the Navigation Core Component

[#1]

This question relates to an earlier post I made here:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/get-subtitle-page-property...

I’m trying to extend the Navigation Core Component and add the subtitle and description page properties at the group level. This is my test code so far in the group.html of the component:

<template data-sly-template.group="${@ items='The navigation items for the current level'}" data-sly-use.itemTemplate="item.html">
    <ul class="cmp-navigation__group" data-sly-list="${items}">
    ${item.properties.subtitle} ${item.description}<sly data-sly-call="${itemTemplate.item @ item=item}"></sly>
    </ul>
</template>

While the solution in my previous post worked in my local HTL REPL page, and I can currently get the description property in the Navigation Core Component, I once again cannot get the subtitle property.  Subtitle is not a custom property and is part of the OOTB page properties, so I assume I’m just missing the required syntax?

[JonMaguire · Accepted solution]

Hi @JonMaguire,

In your previous question the answer was to use ${item.properties.subtitle} because in that case, the item in question was a Page object.

In the case of the Navigation component, the item is not a Page object but a NavigationItem object (you can see this by checking out the getItems() method of the Navigation interface) which does not have a getProperties() method, so ${item.properties.subtitle} will not work 😕 In HTL, the dot accessor is actually shorthand for using a Java getter, so foo.bar is the same as as writing (in Java) foo.getBar().

Instead, I recommend you make your own class that extends the NavigationItem interface and provides a getSubtitle() method.

[JonMaguire · Accepted solution]

Thank you!