How can I change jcr:title of a core component that I bring using data-sly-resource in my custom component ? | Community
Skip to main content
N
NathanVieira
Level 3
July 21, 2023
Solved

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

  • July 21, 2023
  • 3 replies
  • 1337 views

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>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

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/guidelines.html?lang=en#proxy-component-pattern 

 

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

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
July 21, 2023

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/guidelines.html?lang=en#proxy-component-pattern 

 

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
    DEBAL_DAS
    DEBAL_DAS
    New Member
    July 21, 2023

    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?

    Debal Das, Senior AEM Consultant
      N
      NathanVieiraAuthor
      Level 3
      July 21, 2023

      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_
        Community Advisor
        Manu_Mathew_Community Advisor
        Community Advisor
        July 22, 2023

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

         

          Terms & ConditionsAccessibility statement

          Loading footer...