Monday, 15 February 2016

Fetch data from AEM dialog

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.
Fetch data from AEM dialog

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.
Fetch data from AEM dialog

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%>">

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

This will render a component like below having an image and Title.
Fetch data from AEM dialog