Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Include Component inside a data-sly-list

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

4 Replies

Avatar

Community Advisor

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

 

 

Avatar

Level 2

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. 

Avatar

Correct answer by
Community Advisor

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.