Parsys node in content node based on user selection

[DPrakashRaj]

 we have a specific use can where we have to provide the parsys placeholder from 1 to 12 based on user selection. Problem o am facing here is that I have to create a 12 node in aem dialog to hold the parsys in sling resource and even authors select 2 placeholder for oarsys the nodes created inside content node is still 12. Is there a way a to control this parsys node number limiting to the number selected by author just the way core tabs component works. I don’t want to write any backend code to achieve this.

All suggestions and feedback are welcomed.

thanks

[giuseppebag]

The primary concern regarding the requirements is that each parsys must have a unique name in order to function correctly. In theory, you could utilize data-sly-list if you are certain that you can list at least 12 child pages.

<!--/* Iteration control; start from the beginning, stop after the first 12 elements (index 11) */-->
<div data-sly-list="${currentPage.listChildren @ begin = 0, end = 11}">
    <div >${item.title.hashCode @ resourceType='wcm/foundation/components/parsys', prependPath='parsys-'}</div>
</div>

However, I've encountered issues with the prependPath directive in the past, so I can't recommend using it.

Alternatively, you can create a straightforward Sling Model with a getter method.

// Sling model
public List<String > getParsys() {
	IntStream.range(0, Integer.valueOf(numberOfPlaceholders)).boxed().map(value -> "par-"+ value).collect(Collectors.toList());
}

// HTL
<div data-sly-list="${model.parsys}">
    <div data-sly-resource="${ item @ resourceType='wcm/foundation/components/parsys'}"/>
</div>

Or you can use a static approach where you write all 12 data-sly-resource:

    
    <!--/* Generate parsys components based on numberOfPlaceholders */-->
    <div data-sly-test="${numberOfPlaceholders >= 1}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_1' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 2}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_2' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 3}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_3' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 4}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_4' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 5}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_5' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 6}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_6' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 7}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_7' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 8}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_8' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 9}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_9' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 10}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_10' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 11}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_11' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    
    <div data-sly-test="${numberOfPlaceholders >= 12}" class="placeholder-container">
        <div data-sly-resource="${ 'parsys_12' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>

[DPrakashRaj]

Problem is not with creating 12 parsys. I don’t want my component to create 12 node for parsys in the the content node once drag and dropped if user has selected to have only 3 parsys. It should only create 3 nodes.

[giuseppebag]

In my previous "static" example, no parsys will render unless the editor selects the desired count because each uses data-sly-test wrapping.

Consider this: What happens when a user reduces the number of configured parsys? For example, if they initially configure four, then later they change it to two, parsys three and four will remain unless custom code removes these unused child nodes. Highly configurable components can create deeply nested, yet unused, content trees. This should be considered during design and implementation.

[DPrakashRaj]

That’s my ask is how to get rid of unused content nodes without writing custom code to delete the node. For example the way core Tab components work. Is there a way to achieve something similar to core Tabs components 

[giuseppebag]

When you edit the Tabs component, a POST request is sent, which triggers a servlet. Pay attention to the use of the parameter PARAM_DELETED_CHILDREN. You could use this class as starting point.

If you prefer not to write custom code for deletion or ordering, you can extend the Tabs component by starting with your own HTML instead of using tabs.html. Your component does not require tab panels so you can omit the <ol> HTML tag. If you decide to follow this route, please pay attention to the section JavaScript Data Attribute Bindings to enable initialization of the related JS.