I can't display list created by navigation core component when I use data-sly-resource

[NathanVieira]

In the code snippet below I use a data-sly-resource directed to the core component navigation in my project, this navigation has the slingSuperType and in my xml code of _cq_dialog I have a tab with the same nodes that have in the core component navigation but when I select the page in the component's Touch UI it doesn't return the list created by navigation what could I be doing wrong?

HTL CODE 

 <div id="btnMenuConcessionary" class="cmp-header--menuConcessionarys">
            <svg class="chevronRight" data-icon-name="chevronRight" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 6L15 12L9 18" stroke="#1D1D1D" stroke-width="2" stroke-linecap="square"/>
            </svg>

            <div class="cmp-menuConcessionary-panel">
                <sly data-sly-resource="/apps/myproject/components/navigation"></sly>
            </div>
</div>

CONTENT.XML do Core Component Navigation in my project 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Navigation"
    sling:resourceSuperType="core/wcm/components/navigation/v2/navigation"
    componentGroup="My Project - Structure"/>

XML CODE 

<menuConcessionary 
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Menu Concessões"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <navigationRoot
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/coral/common/form/pagefield"
                                                fieldDescription="The root page from which to build the navigation. Can be a blueprint master, language master or regular page."
                                                fieldLabel="Navigation Root"
                                                name="./navigationRoot"
                                                required="{Boolean}true"
                                                rootPath="/content"
                                                value="${not empty cqDesign.navigationRoot ? cqDesign.navigationRoot : ''}"/>
                                            <structureStart
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                fieldDescription="The levels below the navigation root that are to be excluded. To include the navigation root, enter 0."
                                                fieldLabel="Exclude Root Levels"
                                                max="100"
                                                min="0"
                                                name="./structureStart"
                                                step="1"
                                                value="${not empty cqDesign.structureStart ? cqDesign.structureStart : 1}"/>
                                            <collectAllPages
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="${not empty cqDesign.collectAllPages ? cqDesign.collectAllPages : true}"
                                                fieldDescription="Collect all pages that are descendants of the navigation root."
                                                name="./collectAllPages"
                                                text="Collect all child pages"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <structureDepth
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                fieldDescription="Depth of the navigation structure relative to the navigation root."
                                                fieldLabel="Navigation Structure Depth"
                                                max="100"
                                                min="1"
                                                name="./structureDepth"
                                                step="1"
                                                value="${not empty cqDesign.structureDepth ? cqDesign.structureDepth : 1}"/>
                                            <disableShadowing
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="${not empty cqDesign.disableShadowing ? cqDesign.disableShadowing : false}"
                                                fieldDescription="For redirecting pages: show original page instead of target."
                                                name="./disableShadowing"
                                                text="Disable shadowing"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                         </items>
</menuConcessionary>

[Nishant-Singh]

if you are extending navigation core component in your custom navigation component then why you are overriding cq:dialog if the same fields you want in your custom component. remove cq:dialog xml from your component and then check first.

If you want to add some additional fields in OOTB navigation component then you should use resource merger feature by creating same node structure of cq:dialog with nt:unstructured type if you dont want any changes to those nodes.

example : https://gist.github.com/kevinweber/5812f6b670d8ae8d3bfc7bd1ad204b7c

[NathanVieira]

I need to define by my custom component the page I want to select in the Navigation Root input, so in my cq:dialog I am using the same fields, I did the test by removing it and even so only with the data-sly-resource I don't have any return from the navigation

[Nishant-Singh · Accepted solution]

@NathanVieira 

You need to add as below -

<!--/* By default, the AEM decoration tags are disabled, the decorationTagName option allows to bring them back, and the cssClassName to add classes to that element. */-->
<div data-sly-resource="${'navigation' @
                        resourceType='/apps/myproject/components/navigation',
                        decorationTagName='div',
                        cssClassName='className'
                        }"></div>

[NathanVieira]

Perfect, but I also need to edit root navigation inputs in my component's Touch UI, how can I do that? 

With data-sly-resource I can only bring the navigation component into my custom component but I need to edit this navigation through my component's dialog and not through the navigation dialog

[Nishant-Singh]

you don't need to create custom navigation component. just extend navigation OOTB core component in to your MenuConcessionary component and then in your MenuConcessionary.html - copy code from navigation.html and append your HTML .

Example - 

<div id="btnMenuConcessionary" class="cmp-header--menuConcessionarys">
            <svg class="chevronRight" data-icon-name="chevronRight" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 6L15 12L9 18" stroke="#1D1D1D" stroke-width="2" stroke-linecap="square"/>
            </svg>

   <-- Add Navigation.html code here -->
</div>

[NathanVieira]

I have an X component and inside it I have a menuConcessionary div and inside it I have a div with data-sly-resource to bring the core component navigation inside my component.

However, I don't want to edit the Touch UI of this inserted core component, I need to edit in the Touch UI of my component X and the edits be captured by the core component navigation and display the list of items of the page selected by the Touch UI of my component. 

[Manu_Mathew_]

@NathanVieira you need to include the resource as below:

<div data-sly-resource="${'navigation' @ resourceType='/apps/myproject/components/navigation'}"></div>