Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

How to output multiple entries into the same format in HTML

Avatar

Level 1

So I have a component that allows to create a footer menu. So when I enter all the links and text, it adds it all to the in the same HTML. I just want to loop it and output it same HTML, different entries. So I enter these values: ./url, ./target, ./title

code for HTML below does not work, I dont think it is correct.

<div data-sly-list="${currentPage.listChildren}"> <div id="cta-block-one" class="hvr-sweep-to-right"> <a href="${properties.url @ context='html'}" class="" target="${properties.target @ context='html'}"> <h2 class="display-font"><img src="right-arrow.svg" class="right-arrow">${properties.title @ context='html'}</h2> </a> </div> </div>

and here is the touch UI code:

<?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="nt:unstructured" jcr:title="NAV" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/container"/> <items jcr:primaryType="nt:unstructured"> <brandNav jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <brands jcr:primaryType="nt:unstructured" jcr:title="CTA" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <brandList jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/multifield" fieldDescription="Click '+' to add a new CTA" fieldLabel="CTA"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset" acs-commons-nested="JSON_STORE" name="./cta"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" method="absolute"/> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Title" name="./title"/> <url jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/pathbrowser" fieldLabel="URL" name="./url" required="{Boolean}false"/> <target jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/dropdown" fieldLabel="Open Link in" name="./target" required="{Boolean}false" value="view1"> <items jcr:primaryType="nt:unstructured"> <view jcr:primaryType="nt:unstructured" text="the same window (default)" value="_self"/> <view1 jcr:primaryType="nt:unstructured" text="a new window" value="_blank"/> <view2 jcr:primaryType="nt:unstructured" text="a modal window" value="#"/> </items> </target> </items> </column> </items> </field> </brandList> </items> </columns> </items> </brands> </items> </columns> </items> </brandNav> </items> </content> </jcr:root>

Any help would be appreciated.

basically I want it to output:

<a href="#">text</a>

<a href="#">text 2</a>

<a href="#">text 3</a>

 

Thank you so much,

-TM

3 Replies

Avatar

Level 10

Can you explain your use case in more detail. I do not understand what it is you want to loop. 

Avatar

Administrator

Hi

I would request you to please clear your use case bit more.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 10

You can use template available in sightly

So basically you will have a to create a template which defines the markup and then when looping pass the values to it.

Here is article which guides to work with templates http://adobeaemclub.com/guide-for-working-with-templates-and-call-in-sightly-aem-6-1/