How to Create Dialogs in AEM

Dialogs are one of the most basic and widely used element, that is typically used to edit content and display information in AEM. The focus of this tutorial is to explore all types of dialogs that are used day in and day out by and AEM developer. 

This tutorial is targeted for AEM beginners but it also clears AEM dialog basics so useful for advanced developers also. After completing this tutorial you will have a clear understanding on below topics:-
· Create Basic Dialog in AEM.
· Add the Selection xtype field.
· Add Optional collapsible block.
· Fetch value from dialog to JSP.

Create Basic Dialog in AEM:-

In this exercise, we will learn how to create a basic dialog in AEM. I will try to include as many as basic fields and xtypes possible in this exercise. This dialog will consist of a tab, text fields, drop-down (Selection), and expandable fields. Follow the below steps to create a basic dialog in AEM:-

Creating a component:-
· Go to /apps/<project-name>(For example /apps/aemtutorials/components/general).
· Right-click and select Create Component.
· Enter the below details.
§ Label: Your component node name. It is preferred not to use space in Label.
§ Title: You can use any string as the title. Your component is available in sidekick by this name.
§ Description: Brief description of your component
§ Supertype: We have used supertype as parbase to make this component drag and drop-able.
§ Group: This component will belong to this particular group in the sidekick.

· Click Next and Save All.

Creating a Dialog:-
Let's create a basic dialog for this component.
· Right-click on the Dialog Basics component.
· Select create dialog.
· Enter the below details.
§ Label:- Enter any label name, but if you are working on CQ 5.x then its value should be dialog only.
§ Title:- BasicDialog.


· Click OK. Your default dialog structure is ready. It consists of below nodes:-
§ Tab Panel:- A widget to hold multiple panels in different tabs.
§ Widget Collection:- Node to hold multiple widgets.
§ Panel:- Panel that can hold Widget collections, basically the tab body.


· Select Panel Node. Right-click and Create Node.
§ Name: items (Name of the Node)
§ Type: cq: WidgetCollection (It will hold multiple widgets)
§ Save All.
· Select items node. Right-click and Create Node.
§ Name: Full Name (Name of the Node/Widget)
§ Type: cq: Widget (It can be any type of widget depending upon which xtype we will use)
§ Save All.


§ Add xtype = textfield in order to behave this node as textfield.
§ Add fieldLabel: This will be displayed as a label before the field.
§ Add name: This(./fullName) should be a unique name to get user value from dialog to JSP. All fields in a component should have a unique value of name property.


· Congratulations you have created your first dialog successfully.
· Go to Dialog Basics.jsp and enter some text, so that we can test our new dialog.
§ Open Dialog Basics.jsp and enter “This is my first Dialog”


· Go to the site admin and create a page or use an existing page where you can drag and drop this component.


Add Selection xtype field to the dialog:
Now Lets add selection drop down field to this dialog.
· Select widget collection node(items) above full name. Right-click and Create Node.
§ Name: country_list (Name of the Node/Widget)
§ Type: cq:Widget (It can be any type of widget depending upon which xtype we will use)
§ Save All.
§ Add xtype = selection in order to behave this node as a selected node. Note:- Selection xtype has further sub-types like select (dropdown), Combobox (select plus free text entry), checkboxes and radio buttons.
§ Add type: select for creating a dropdown.
§ Add fieldlabel: This will be displayed as a label before the field.
§ Add name: This(./country) should be a unique name to get user value from dialog to JSP. All fields in a component should have a unique value of name property.


Now let's create the dropdown options.
· Select country_list node, right-click and Create Node
§ Name: options
§ Type: cq: WidgetCollection (It will hold option list)
§ Save All.
· Select options node, right-click and Create Node
§ Name: v1
§ type: cq: Widget
§ Save All.
§ Select v1 node and
o Add text – India (This text will be displayed in the dropdown to users)
o Add value – India(this is the value that is stored at jcr node)
§ Repeat the above process 2 more times and create node v2 and v3.


· Congratulations you have added a drop-down menu to your first dialog successfully.
· Double click on dialog node.


Add optional collapsible field:
· Select widget collection node(items) above full name. Right-click and Create Node.
· Name: optional (Name of the Node/Widget)
· Type: cq: Widget (It can be any type of widget depending upon which xtype we will use)
· Save All
· Add xtype = dialogfieldset in order to behave this node as a selected node.
· Add Title: This will be displayed as a label before the field.
· Add collapsed: Boolean true (to collapse the block by default)
· Add collapsible: Boolean true to make the field collapsible.
Now let's create fields under it.
· Select optional node, right-click and Create Node
§ name: items
§ type: cq: WidgetCollection
§ Save All.
· Select items node and add widgets to this node
§ name: address
§ type: cq: Widget
§ Save All.
§ Add xtype: textarea in order to behave this node as textarea.
§ Add name : ./textarea

· Congratulations you have added an optional block to your first dialog successfully.
· Double click on dialog node.


Fetch Value from Dialog to JSP
The last task of a developer to fetch values from the dialog and display it in JSP or send it to a servlet. Let’s see how we can get user input from dialog to JSP.
To fetch values within component from dialog can be achieved by using properties.get() method
· Open component JSP (Dialog Basic.jsp) and add below code.

<%@include file="/libs/foundation/global.jsp"%>

<% String text = properties.get("fullName", "default text");// default text will be stored if no value provided for this property //String title = properties.get("fullName", String.class); //defaults to null if no value is entered %>
Text: <%= text %>
${properties.fullname} <%-- fetch value directly in jsp using EL properties.<name_of_property> --%>

Note:- Its always better to provide a default text, if you have not provided any default value at the node level.