Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Dynamic path and resourcetype in data-sly-resource

Avatar

Level 4

Hi,

I have a requirement where I am including a data-sly-resource within a data-sly-list. I want the path of every resource to be different i.e. use an index or sightly use variable as well as the component should be referenced from the use api.

<data-sly-list.item="${class.list}">

<div data-sly-resource="${@path='par${item.name}', resourceType='${item.componentPath}'}></div>

</div>

I could do this using cq:include in jsp.

I am not sure if a sightly variable/tag can be used within another sightly tag.

What I am trying to is have a multifield widget that accepts resourceType from the author. I should be able to reorder the included components. Can you let me know if there is any other way to achieve this?

desktop_exl_promo_600x100_weempoweryou.png

1 Accepted Solution

Avatar

Correct answer by
Level 4

Well this solved my problem

<div data-sly-resource="${ @path=compItem.name, resourceType=compItem.component}"></div>

I am wondering why i didnt try this earlier. Pretty straightforward

View solution in original post

7 Replies

Avatar

Level 10

Hi,

You can simply use below code

<div  data-sly-resource="${ 'item{0}' @ format=itemList.count, resourceType='path to component resource}"></div>

It will create node with name item1, item2, item3...etc

Thanks

Avatar

Level 4

Thank you @edubey  It resolved my issue. I was not using the format and was forming the path as ${'item'$itemList.counter}

Avatar

Level 4

Thanks for your reply edubey. Can you also help me with the resourceType. It is a value being returned from the javascript use object. Thanks again for your help on this.

Avatar

Level 10

In which form you are getting values from use object?

Can you share JS Use code snippet?

Avatar

Level 4

Here is my js code

"use strict"; var global = this; use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js", "/libs/wcm/foundation/components/utils/ResourceUtils.js", "/libs/sightly/js/3rd-party/q.js"], function (AuthoringUtils, ResourceUtils, Q){ var sociallinks = resource.getChild("sociallinks"); var componentList = []; if(null!=sociallinks){ var children = sociallinks.listChildren(); for(var index in children){ var socialLink = children[index]; log.info(socialLink.name); var socialLinkProperties = socialLink.adaptTo(Packages.org.apache.sling.api.resource.ValueMap); var item = {}; item.quesId = socialLinkProperties.get('navigationLink'); item.name = socialLink.name; item.component = socialLinkProperties.get('comp'); componentList.push(item); } } var slyComponent = {}; slyComponent.components = componentList; return slyComponent; });

item.name is the value i want to use in my path and item.component is what i want to use in my resourceType

 

Added HTML code for your reference as well

<sly data-sly-use.social="social.js"> <div class="pdpIcons col-md-12" data-sly-test="${social.components}" data-sly-list.compItem="${social.components}"> <div>Component Placeholder <div data-sly-resource="${@path='${compItem.name}', resourceType='${compItem.component}'}"></div> </div> </div> </sly>

Avatar

Level 4

@edubey 

<div data-sly-resource="${ '{0}' @format=compItem.name @resourceType='/apps/test/social'}"></div> works fine for the path but I want something that can make resourceType value to be compItem.component

Avatar

Correct answer by
Level 4

Well this solved my problem

<div data-sly-resource="${ @path=compItem.name, resourceType=compItem.component}"></div>

I am wondering why i didnt try this earlier. Pretty straightforward