Dynamic path and resourcetype in data-sly-resource | Community
Skip to main content
DhirajAg
DhirajAg
Level 4
June 4, 2016
Solved

Dynamic path and resourcetype in data-sly-resource

  • June 4, 2016
  • 6 replies
  • 22409 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by DhirajAg

    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

    6 replies

    edubey
    edubey
    Level 10
    June 4, 2016

    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

      V
      vsharm
      Level 4
      May 3, 2022

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

      DhirajAg
      DhirajAgAuthor
      Level 4
      June 4, 2016

      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
      edubey
      Level 10
      June 4, 2016

      In which form you are getting values from use object?

      Can you share JS Use code snippet?

      DhirajAg
      DhirajAgAuthor
      Level 4
      June 4, 2016

      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
      DhirajAgAuthor
      Level 4
      June 4, 2016

      @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
      DhirajAgAuthorAccepted solution
      Level 4
      June 4, 2016

      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

      Terms & ConditionsAccessibility statement

      Loading footer...