Include Component inside a data-sly-list | Community
Skip to main content
A
ArchR
New Participant
August 4, 2023
Solved

Include Component inside a data-sly-list

  • August 4, 2023
  • 3 replies
  • 2271 views

Hi All, 

 

 I need to include a component inside a data-sly-list in Sightly. However, it is not creating a child node inside the corresponding parent node. How to include the <sly data-sly-resource="${@path=<>, resourceType=<>} with proper parameter to get the sequential storage of nodes?

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 Sady_Rifat

Hello @archr ,

A few years back I did the same thing. To achieve this you can follow this:

  • In your HTL,

    <sly data-sly-list.checkbox="${model.checkboxList}"> <div class="checkbox section" data-sly-resource="${checkbox.slug @ resourceType='aem-demo/components/content/checkbox'}"> </div> </sly> // Output of consent will be like this <sly data-sly-list.checkbox="${model.checkboxList}"> <div class="checkbox section" data-sly-resource="${'ckb-4353' @ resourceType='aem-demo/components/content/checkbox'}"> </div> </sly>

    In my case, the checkbox.slug is the UUID for each checkbox. You can also consider the index value as a node name. After Opening the dialog of the checkbox component and submitting it you will see a node is created with the name of 'ckb-4353'. Before submit the dialog node will not be created.

  • From your model, you need to populate the index or ID.

Hope you will fulfill the requirement. further, if you trouble or need help let me know.

3 replies

Sady_Rifat
Sady_RifatAccepted solution
New Participant
August 7, 2023

Hello @archr ,

A few years back I did the same thing. To achieve this you can follow this:

  • In your HTL,

    <sly data-sly-list.checkbox="${model.checkboxList}"> <div class="checkbox section" data-sly-resource="${checkbox.slug @ resourceType='aem-demo/components/content/checkbox'}"> </div> </sly> // Output of consent will be like this <sly data-sly-list.checkbox="${model.checkboxList}"> <div class="checkbox section" data-sly-resource="${'ckb-4353' @ resourceType='aem-demo/components/content/checkbox'}"> </div> </sly>

    In my case, the checkbox.slug is the UUID for each checkbox. You can also consider the index value as a node name. After Opening the dialog of the checkbox component and submitting it you will see a node is created with the name of 'ckb-4353'. Before submit the dialog node will not be created.

  • From your model, you need to populate the index or ID.

Hope you will fulfill the requirement. further, if you trouble or need help let me know.

    Mahedi_Sabuj
    Mahedi_Sabuj
    New Participant
    August 4, 2023

    Hi @archr, Child node will not create inside the corresponding parent node until you open and save the child component dialog.

    To create child node immediately once you drag the parent component, you need to add the child nodes in _cq_template like below

    <?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"> <teaser_text jcr:primaryType="nt:unstructured" sling:resourceType="aem-demo/components/text"/> <teaser_action jcr:primaryType="nt:unstructured" sling:resourceType="aem-demo/components/button"/> <teaser_image jcr:primaryType="nt:unstructured" sling:resourceType="aem-demo/components/image"/> </jcr:root>

     

     

    In case of data-sly-list, you can create JcrNode using Sling Model which will execute on Author (wcmmode.edit) only.

    // HTL <sly data-sly-test="${wcmmode.edit}" data-sly-use.model="com.aem.demo.core.components.model.Teaser"/> // Sling Model for(int i = 0; i < length; i++) { Node itemNode = JcrUtil.createPath( resource.getPath() + "/item_" + i, JcrConstants.NT_UNSTRUCTURED, session); itemNode.setProperty( JcrResourceConstants.SLING_RESOURCE_TYPE_PROPERTY, ITEM_NODE_RESOURCE_TYPE); // Additional Properties itemNode.setProperty("key", "value"); } session.save();

     

     

    Mahedi Sabuj
      A
      ArchRAuthor
      New Participant
      August 4, 2023

      Actually tried something like this,   but this clears off the authored data everytime when we edit the main the parent multifield.

       

      <sly data-sly-set.itemId="navigationItemsList/item${itemList.index}"></sly>
      <sly data-sly-resource="${@path=itemId ,resourceType='allegion-core/components/common/listlinks'}"></sly>

       

      As well, is there any suggestions to give better authoring experience?

      When the component is included multiple times linked with multifield, then authoring becomes more clumsy. 

        Terms & ConditionsAccessibility statement

        Loading footer...