How to specify content area in a template or add a component through code

[alwinaugustin]

I'm new to AEM and attempting to create a website based on a reference site. I have a set of custom components, one of which is a dynamic navbar component that will generate a customised top navigation. I want to use this navigation on all pages instead of the default community navigation menu in sitenavbar.hbs. However, I'm uncertain about how to indicate the specific location for the component to appear in the file so that I can add it via the authoring tool, or how to specify the component in the hbs code. I would greatly appreciate any guidance on this matter. Thank you.

[ShaileshBassi · Accepted solution]

Hi @alwinaugustin 

With editable templates, the pieces that make a page are isolated within components. You can configure the necessary combinations of components in a UI so that you eliminate the need for a new page component to be developed for each page variation.

Over here, the dynamic navbar component can be configured at any location from the editable template. The location can be fixed for all the pages using the same template by having multiple containers.

Reference for editable template working: https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/templates/page-tem...

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:deviceGroups="[/etc/mobile/groups/responsive]"
        cq:template="/conf/examples/settings/wcm/templates/content-page-template"
        jcr:primaryType="cq:PageContent"
        sling:resourceType="examples/components/structure/page">
        <root
            jcr:primaryType="nt:unstructured"
            sling:resourceType="wcm/foundation/components/responsivegrid">
            <experiencefragment-header
                jcr:primaryType="nt:unstructured"
                sling:resourceType="examples/components/content/experiencefragment"
                fragmentVariationPath="/content/experience-fragments/examples/us/en/site/header/master"/>
            <responsivegrid
                editable="{Boolean}true"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="wcm/foundation/components/responsivegrid"/>
            <experiencefragment-footer
                jcr:primaryType="nt:unstructured"
                sling:resourceType="examples/components/content/experiencefragment"
                fragmentVariationPath="/content/experience-fragments/examples/us/en/site/footer/master"/>
        </root>
        <cq:responsive jcr:primaryType="nt:unstructured">
            <breakpoints jcr:primaryType="nt:unstructured">
                <phone
                    jcr:primaryType="nt:unstructured"
                    title="Smaller Screen"
                    width="{Long}768"/>
                <tablet
                    jcr:primaryType="nt:unstructured"
                    title="Tablet"
                    width="{Long}1200"/>
            </breakpoints>
        </cq:responsive>
    </jcr:content>
</jcr:root>

Over the above xml file, experiencefragment-header and experiencefragment-footer are the fixed section that are appearing on all the pages.

Hope this helps!

Thanks