Include Component inside a data-sly-list

[ArchR]

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?

[Mahedi_Sabuj]

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();

[ArchR]

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. 

[DPrakashRaj]

Take a look to 

1. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-data-sly-list-with-m...
2. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/component-included-by-usin...

[Sady_Rifat · Accepted solution]

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.