Skip to main content

Quality Assurance

Differentiating Between Dialog and Design Dialog in AEM

Istock 935964092

AEM components dialog is the most important part of AEM. We cannot reuse components without the AEM components dialog.

What is a Design Dialog?

A design dialog is a special kind of dialog that is available only in page design mode in AEM. It allows authors to customize the design of a component by adjusting properties (Ex. color, images, and layout).

This is a dialog that can store content and configuration that can be used on different pages. This is used when we require the component and configuration to be the same across the application and which are created in the same template.

Ex. We can create a logo and use the design dialog for the logo component because the logo will be the same throughout the component.

What Does the Design Dialog Look Like?

  1. Open the author page and change the editing mode to Design mode.


    Fig: Author Page

  2. Below are the design modes for the image component.

    Designmode Image

    Fig: Design Dialog & Normal Dialog

Differences Between Dialog and Design Dialog


Fig: Difference between Dialog & Design Dialog

How to Create a Design Dialog

Tab component before creating design dialog.


Fig: Tabs component Before Design Dialog

Step 1: Log in with crxde lite (http://localhost:4502/crx/de/index.jsp#/apps).

Step 2: Navigate to folder structure (/weretail/components/content/tabs).

Step 3: Select the component and create a node called cq:design_dialog.


Fig: Create Node

Step 4: Create different nodes with component names, add attributes, and save.

Nodes Structure

Step 5: Open the author URL, navigate the content page template, and verify the tab component.


Fig: Tab component after Design dialog

Ex. Design dialog of the text component

Design Textcomp

Fig: Design dialog of Text component

Design dialog isolates problems. It is used to change its layout, design, and style. Components are easier to maintain and update over time.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ashish Kirme

Ashish Kirme is Senior Technical Consultant at Perficient GDC Nagpur; he has more than 8 years of experience (3 yr. in AEM). Experience in Manual and Automation testing; also worked as QA lead for offshore team. He likes to learn about new Automation technologies.

More from this Author

Follow Us