Design dialog is 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 template level.

Design dialog is used when we require components to be configured once and that should remain same though out the website which are created using 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 separate tutorial.

Note:- If we create two pages using different templates or different design then we need to configure component for both pages.

The aim of this tutorial is to have clear understanding about:-

• How to create design dialog.
• How to author design dialog.
• How content stored for dialog is different then design dialog.

Create design dialog in aem:-

Follow 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 menu select Create –> Create Node 
  • Name:- items (Name of node should be items only. Its is mandatory)
  • Type:- cq:WidgetCollection
    
• Select items node. From menu select Create –> Create Node 
  • Name:- customTitle (It is adviced to have 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 on our design dialog, it should look like below:-

Author design dialog in aem:-

Now lets 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 side kick navigate to design mode.
  
• Click on 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 make it to store content at one place and all other pages refered 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 Where as 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.

Hope you got a clear understanding about what is design dialog , how to create design dialog and how it is different from dialog in aem.