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

Forum|Forum|2 years ago
July 18, 2023
2 replies
1453 views

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>

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 Nishant-Singh

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

Nishant-Singh

Adobe Employee

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

N

NathanVieiraAuthor

Level 3

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

Adobe Employee

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