How to dynamically add components in your container component?

[Pleben]

I have created a container component wherein i have a field in dialog which is a numberfield to set the number of childer components to be enabled.Is there a way that on number authored the children component can be added? As in if 2 is authored, i wanted two children components.

[Tethich]

Hi @Pleben 

Do you have any limitation that forbids you of using Granite Multifield ?

[Pleben]

No limitations as such. However how is a multifield going to help in this case? I want to limit the number of child components that can be added say 5. Therefore if it is possible to set the number of slides in container and dynamically add those many child components in container it would be great

[Tethich · Accepted solution]

There is a way to limit the multifield, but needs custom code. Many already did it:

https://aemhints.com/2020/10/24/limit-multifield-aem65/

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-set-min-max-item-in...

As for adding dynamically those many children, it can be achieved by setting up initial content in your component template file.

[TarunKumar]

HI @Pleben ,

The standard approach for inserting a varying number of components, is to include the Paragraph System Component (parsys), and then let the author insert the components he or she needs (can be limited to allow only specific components).

In container component HTL file you can add data sly list statement which will inject reourcetype of specific component based on the dialog value. If dialog value is to add 2 components then run the list for two time to inject inner component.

-Tarun

[PRATHYUSHA_VP]

Hi @Pleben 

To add dynamically the number of components based on the authoring, you can read the no. of items in sightly and iterate the child component resource using data-sly-list 

Hope this helps

Thanks