Skip to main content
Nandheswara
Nandheswara
Level 4
April 17, 2023
Solved

Inserting component through dialog of other component

Hi all,

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
partyush
partyushAccepted solution
Community Advisor
April 17, 2023

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.

View in thread

4 replies

Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
April 17, 2023

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/wcm/core/components/models/PanelContainer.java 

Translate
    Nandheswara
    NandheswaraAuthor
    Level 4
    April 17, 2023

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

    Translate
      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      April 17, 2023

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

      Translate
        partyush
        Community Advisor
        partyushCommunity AdvisorAccepted solution
        Community Advisor
        April 17, 2023

        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.

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...