How to create a design dialog in AEM

Design dialog is a very important and useful feature provided by AEM when we want multiple pages to access content and configurations from a centralized location (/etc/design). The only difference between dialog and design dialog is that for dialog content is stored at page level whereas for design dialog content is stored at the template level.
Design dialog is used when we require components to be configured once and that should remain the same though out the website which are created using the same template, like our structure components Logo component, navigation, header component, etc.

Note:- This tutorial is valid till AEM 6.2, from AEM 6.3 Design dialog content is stored under /conf and I will cover it in a separate tutorial.
Note:- If we create two pages using different templates or different design then we need to configure the component for both pages.
The aim of this tutorial is to have a clear understanding of:-
· How to create design dialog.
· How to author design dialog.
· How content stored for dialog is different than design dialog.   

Create design dialog in aem:-
Follow the below steps to create design dialog in aem:-
· Login to CRXDE.
· Go to /apps/<project-name>/<path to component> [For Ex:- /apps/training/components/structure/trainingPage ]
· Right Click on your component and select –> Create –> Create Dialog

· Rename Label from dialog to design_dialog . [Note:- Label should be design_dialog only]

· Expand the design_dialog node


· Expand design_dialog node and select Tab 1 node. (I will describe what is the use of which node and why we have created)
· Right-click on Tab 1 node. From the menu select Create –> Create Node
§ Name:- items (Name of the node should be items only. Its is mandatory)
§ Type:- cq:WidgetCollection


· Select items node. From the menu select Create –> Create Node
§ Name:- customTitle (It is advised to have a name in lower case)
§ Type:- cq:Widget


· Add below jcr properties to customTitle node.
§ Name:- name Type:- String Value:- ./title
§ Name:- xtype Type:- String Value:- textfield
§ Name:- fieldLabel Type:- String Value:- Enter Title
· Now if we have a look at our design dialog, it should look like below:-
Author design dialog in aem:-
Now let's see how content authors can make use of this design dialog and author it on-page.
· Go to site admin.
· Open your existing page or create a new page.
· From sidekick navigate to design mode.

· Click on the Design of <Component Name>.
· Enter the text or author it and click OK.


· Your component is authored on all the pages which are created using this template.
Now the question arises what happened in case of design dialog that makes it store content at one place and all other pages referred it whereas in case of dialog we have to configure on all pages.

How Content is getting stored for Design Dialog:-
In case of plain dialog, the content is stored under /content/<path to page> i.e at page level Whereas in case of design dialog the content is stored under /etc/<path to design template> i.e at template level as shown in below figure.
   

Note:-If we have not created any Design from Tools console for this template, then it will get stored under /etc/design/default template.