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

[NathanVieira]

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>

[EstebanBustamante · Accepted solution]

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

[DEBAL_DAS]

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

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?

[NathanVieira]

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

[Manu_Mathew_]

@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.