Community Advisor

Parsys node in content node based on user selection

Forum|Forum|10 months ago
March 28, 2025
2 replies
957 views

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

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

giuseppebaglio

Level 10

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

Author

Community Advisor

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.

giuseppebaglio

Level 10

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.

kautuk_sahni

Community Manager

@dprakashraj Did you find the suggestion helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

DPrakashRaj

Author

Community Advisor

No, this is not what I am looking for. I am looking for a way to create parsys node in jcr based on user selection and not the number of parsys node created in dialog. For reference Tabs component or layout foundation component. Extending a tab component is not going to work for me because of multiple reasons as their functionality is totally different from what I am looking for and extending tab component for my use case requires lots of re-engineering that I am already aware of. May be any hint on how the core tab is doing it for the reference and feasibility of just calling the service that is responsible for managing the parsys node in jcr dynamically based on selection.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded