Fetch data from AEM dialog

How to get data from AEM dialog.
When working with AEM I come across many situations where we need to create a component which has a dialog field. A dialog field is nothing but gives access to a pop up window when clicked in the design mode.In simple terms makes a component interactive.

Here is a example dialog window.

To create this dialog follow the diagram as shown below.
Create a component as per below instructions. I have used a "pathfield" and "textfield" xtype for my component.



Fetching data from AEM component dialog:
To fetch data from a component dialog inside a component jsp use this syntax

String property=properties.get("propertyName","Defaultvalue");

propertyName: The name field. In dialog this is "./" followed by a text.
Defaultvalue: If propertyName property is not found then replace with this value.

So in our example, copy and paste the following JSP in contentcomponent.jsp

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

<%@page session="false" %>

<%

String title=properties.get("title","");

String img=properties.get("img","");

%>

<img  src="<%=img%>">

<h3><%=title%></h3>

Drag and drop the component in design mode to use it. Open the dialog and enter data as you require. See the sample below.


This will render a component like below having an image and Title.