Dynamic path and resourcetype in data-sly-resource

[DhirajAg]

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?

[edubey]

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

[vsharm]

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

[DhirajAg]

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.

[edubey]

In which form you are getting values from use object?

Can you share JS Use code snippet?

[DhirajAg]

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>

[DhirajAg]

@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

[DhirajAg · Accepted solution]

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