Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Dynamic path and resourcetype in data-sly-resource

DhirajAg
Level 4
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
DhirajAg
Correct answer by
Level 4
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

6 Replies
edubey
Level 10
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

DhirajAg
Level 4
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.

edubey
Level 10
Level 10

In which form you are getting values from use object?

Can you share JS Use code snippet?

DhirajAg
Level 4
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>
DhirajAg
Level 4
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

DhirajAg
Correct answer by
Level 4
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