Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How can I change jcr:title of a core component that I bring using data-sly-resource in my custom component ?

Avatar

Level 3

I have a custom component and I bring a core component navigation as the snippet below 

 

But, for default the core component brought display the default title Navigation (v2) and I want to change to a custom title like ${properties.itemName}, how can I do that ? 

 

<div class="cmp-subitens--panel">

  <div class="cmp-subitens-navigation" data-sly-resource="${'navigation{0}' @ format=itemList.count,                                resourceType='core/wcm/components/navigation/v2/navigation'></div>

</div>
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You should avoid using directly the core components, instead, you need to use  the "proxy" pattern while working with core components, there, you can apply any modification relevant to your project, as the one you are requiring, please read more about proxy components here: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/guidelin... 

 

Once you create a proxy component for the navigation you should update your code to something like this:

  <div class="cmp-subitens-navigation" data-sly-resource="${'navigation{0}' @ format=itemList.count,                                resourceType='myproject/components/navigation'></div>

Where "myproject/components/navigation" will have the updates you are looking for.

 

Hope this helps



Esteban Bustamante

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

You should avoid using directly the core components, instead, you need to use  the "proxy" pattern while working with core components, there, you can apply any modification relevant to your project, as the one you are requiring, please read more about proxy components here: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/guidelin... 

 

Once you create a proxy component for the navigation you should update your code to something like this:

  <div class="cmp-subitens-navigation" data-sly-resource="${'navigation{0}' @ format=itemList.count,                                resourceType='myproject/components/navigation'></div>

Where "myproject/components/navigation" will have the updates you are looking for.

 

Hope this helps



Esteban Bustamante

Avatar

Employee Advisor

You can follow the steps below -

 

1. You can have project specific navigation component (this will be your proxy component) and this project specific navigation component will be having all the capabilities same as core Navigation (v2) via sling:resourceSuperType as shown below

DEBAL_DAS_0-1689946250613.png

2. Give a custom title via updating of jcr:title property (Your component title name)

3. then use the code snippet below -

<div class="cmp-subitens-navigation" data-sly-resource="${'navigation{0}' @ format=itemList.count,                               resourceType='demo/components/navigation'></div>

 

One question: Why are you planning to use ${properties.itemName} here?

Avatar

Level 3

I have in my component's dialog a text field that the user applies any value like About Us, Team, Address etc...

I want to make the value of this input replace the jcr:title of my navigation inserted by data-sly-resource So each inserted navigation will have the same name as the itemName property in my dialog

Avatar

Community Advisor

@NathanVieira You could probably override the setter method in the sling model.

You could also use a data attribute and override it via JS.

However creating a proxy component gives you more flexibility to update it as per your need.