Inserting component through dialog of other component

[Nandheswara]

Hi all,

Can anyone help me regarding how to insert component through dialog of other component as like carousel, tabs and accordion core component.

[Sady_Rifat]

Hello @Nandheswara ,
Adding a new component through dialog you need to take help from PanelContainer component.

On your custom component sling:resourceSuperType will be core/wcm/components/panelcontainer/v1/panelcontainer

After that get the list your Sling Model should extend from PanelContainer interface.

https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w... 

[Nandheswara]

Hi I tried same but when I click on Add button nothing happens. Insert component dialog is not opening.

[Sady_Rifat]

In that case, you have a problem that is related to the component policy.

[partyush · Accepted solution]

Hi @Nandheswara 

To insert a component through a dialog of another component in AEM, you can follow these general steps:

1. Define the dialog for the component that will contain the other component(s). This can be done in the component's cq:dialog node in the component's content path.

2. Within the dialog, define a field that will contain the other component(s). This can be done using the coral-multifield or granite/ui/components/coral/foundation/container widget.

3. Within the multifield or container widget, define the subfields for each instance of the component that will be inserted. For example, for a carousel component, you might define subfields for the carousel image and caption.

4. In the component's dialog.xml file, add the necessary properties to reference the other component(s) that will be inserted. For example, for a carousel component, you might add a sling:resourceType property referencing the core/wcm/components/carousel/v1/carousel component.

5. In the component's cq:editConfig node, add the insert property to define the insertion point for the other component(s). For example, for a tabs component, you might define the insert property to insert the tabs component into the granite/ui/components/coral/foundation/container widget.

6. Add the necessary clientlibs and component templates to render the inserted component(s).

Note that the exact steps will depend on the specific component(s) you are trying to insert and the structure of your project. It's also worth noting that some components may have special requirements or limitations for insertion. Therefore, it is recommended to refer to the documentation and/or sample code provided by Adobe to ensure proper implementation of component insertion.