Article summary

Summary
Discusses how to use a Granite DataSource object to populate a drop-down control in the dialog of a Touch UI component. 
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6

Introduction

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that contains a drop-down control that can be used within the AEM Touch UI view. An AEM author selects drop-down values during design time. For example, an author can select a USA state value from an AEM component that displays address information. A drop-down control is populated by using a com.adobe.granite.ui.components.ds.DataSource object. For information, see DataSource

Once you create a DataSource object, its data can be used to dynamically populate a drop-down control, as shown in this illustration. 

HeroComopnent


This article modifies the Hero Touch UI component that was created by following this AEM community article:

Creating your first Adobe Experience Manager Touch UI component

Before you read this article, its is strongly recommended that you create the Hero Touch UI component by following the article listed here. This article assumes that you have created the project files created from that article. 

The following illustration shows the new project files created in this development article.

ProjectFiles
Section Description
A A JSP script that defines a com.adobe.granite.ui.components.ds.DataSource object used to populate the drop-down control in the Hero component' dialog. 
B A JCR node that defines the drop-down control in the Touch UI dialog.   
C A JCR node that maps to the DataSource script.

This development article steps you through how to modify the Hero component. A drop-down control is added to the Hero compoent and then a DataSource object is created that is responsible for populating the drop-down control with data. Perform these steps:

  1. Add a drop-down component to the Hero component dialog.
  2. Add a DataSource script to the component folder. 
  3. Modify the Hero component JSP. 

Add a drop-down component to the Hero component dialog

Add a drop-down control to the Hero component's dialog by performing these steps: 

1. Select /apps/mywebsite2/components/herotext2/cq:dialog/content/items/herotext/items/column/items.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: taskPriority
  • Type: nt:unstructured

4. Add the following properties to the taskPriority node.

 

Name Type Value Description
fieldLabel
String Dropdown
Specifies the label for the control on the dialog.
name
String
./jcr:drop
Specifies the name of the control.
sling:resourceType
String
granite/ui/components/
foundation/form/select
Specifies the type of control. In this example, the control is a drop-down.

5. Click on the following node: /apps/mywebsite2/components/herotext2/cq:dialog/content/items/herotext/items/column/items/taskPriority.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: datasource
  • Type: nt:unstructured

7. Add the following property to the datasource node.

Name Type Value Description
sling:resourceType String /apps/mywebsite2/
components/datasource
Defines the DataSource to populate the drop-down control. This value points to the JCR node where the JSP script is located. The JSP defines the DataSource object. 

Add a DataSource script to the component folder

Next create the JSP script that defines the DataSource object that is used to populate the new drop-down control. To populate a drop-down (or any selected granite control), you use an instance of com.adobe.granite.ui.components.ds.DataSource.

The following JSP defines a DataSource object that is used to populate the drop-down control. 

<%@page session="false" import="
                  org.apache.sling.api.resource.Resource,
                  org.apache.sling.api.resource.ResourceUtil,
                  org.apache.sling.api.resource.ValueMap,
                  org.apache.sling.api.resource.ResourceResolver,
                  org.apache.sling.api.resource.ResourceMetadata,
                  org.apache.sling.api.wrappers.ValueMapDecorator,
                  java.util.List,
                  java.util.ArrayList,
                  java.util.HashMap,
                  java.util.Locale,
                  com.adobe.granite.ui.components.ds.DataSource,
                  com.adobe.granite.ui.components.ds.EmptyDataSource,
                  com.adobe.granite.ui.components.ds.SimpleDataSource,
                  com.adobe.granite.ui.components.ds.ValueMapResource,
                  com.day.cq.wcm.api.Page,
                  com.day.cq.wcm.api.PageManager"%><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><cq:defineObjects/><%
 
// set fallback
request.setAttribute(DataSource.class.getName(), EmptyDataSource.instance());
 
ResourceResolver resolver = resource.getResourceResolver();

//Create an ArrayList to hold data
List<Resource> fakeResourceList = new ArrayList<Resource>();

ValueMap vm = null; 


//Add 5 values to drop down! 
for (int i=0; i<5; i++)
{

    //allocate memory to the Map instance
 vm = new ValueMapDecorator(new HashMap<String, Object>());   


 // Specify the value and text values
 String Value = "value"+i ;
 String Text = "text"+i ; 

    //populate the map
 vm.put("value",Value);
 vm.put("text",Text);

 fakeResourceList.add(new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm));
}


//Create a DataSource that is used to populate the drop-down control
DataSource ds = new SimpleDataSource(fakeResourceList.iterator());
request.setAttribute(DataSource.class.getName(), ds);

%>

In this example, a for loop is used to populate a Map object with data values. For each iteration of the loop, a new value and text value is created and assigned to the map object. After the loop is done, a DataSource object is created using the following code: 

DataSource ds = new SimpleDataSource(fakeResourceList.iterator());

Notice that a SimpleDataSource contructor is used and the Map object's iterator method is passed. The DataSource object is passed as an argument to the request object's setAttribute method. 

request.setAttribute(DataSource.class.getName(), ds);

To create the DataSource script, perform these steps using CRXDE lite:

1. Click /apps/mywebsite2/components.

2. Right click, and select Create, Create Folder. 

3. Name the folder datasource. 

4. Click /apps/mywebsite2/components/datasource.

5. Right click, and select Create, Create File.

6. Name the file datasource.jsp.

7. Add the code displayed in this section to this JSP.

Modify the Hero script

Modify the Hero component's script that is located at this JCR location: 

/apps/mywebsite2/components/herotext2/herotext2.jsp 

Add the following code to this JSP. 

<%@page session="false"%><%--
   ==============================================================================
 
  Hero Text component
 
  Combines the text and the image component
 
--%><%@ page import="
    com.day.cq.wcm.api.WCMMode,com.day.cq.wcm.foundation.Placeholder" %><%
%><%@include file="/libs/foundation/global.jsp"%><%
 
        String heading = (String)properties.get("jcr:Heading");
if (heading == null) {
    if(WCMMode.fromRequest(slingRequest) == WCMMode.EDIT) {
        %><%= Placeholder.getDefaultPlaceholder(slingRequest, component,
        "<img src=\"/libs/cq/ui/resources/0.gif\" class=\"cq-list-placeholder\" alt=\"\">")%><%}    
}
else {
%>
        <header>
            <cq:text property="jcr:Heading" placeholder="Hero Text" tagName="h1" escapeXml="true"/>
            <cq:text property="jcr:description" placeholder="" tagName="p" tagClass="intro" escapeXml="true"/>
             </header>


<p>Here is the value of the drop component: <%=properties.get("jcr:drop") %></p>


<%
}
%>

Create an AEM web page that uses the Touch UI component 

The final task is to create a site in the AEM Touch UI view that contains a page that is based on  templateWeb (the template created earlier in the other development article). This AEM page lets you select the herotext2 component from the AEM Touch UI side rail, as shown in the following illustration.

HeroText2

As you will see, there is a new drop-down in the hero components dialog. Select a value and click the checkmark button. You will see the selected value in the AEM web site. 

HeroComopnent2

The following illustration shows these values in the AEM web page. 

page

Note:

In the previous illustration, notice that text3 is selected. Next notice that value3 is displayed in the web page. This is because when you set the map in the DataSource object, the text value is displayed in the dialog (as shown here). The corresponding value is displayed in the web page. 

To create an AEM web page that uses the Touch UI component, perform these tasks:

  1. Go to the AEM welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Sites.
  3. Select the + Icon in the web page. This create a new AEM page. 
  4. Select Create Page.
  5. Select templateWeb from the list of templates that appear. 
  6. Select Next.
  7. Specify the name of the page in the Title field.
  8. Select Create Page and open the new page. 
  9. Drag the herotext2 compnent from the AEM side rail into the page. Double click on the component. Enter values into the dialog. Once done, the values are displayed in the AEM web page.

See also

Congratulations, you have just modified an AEM 6 Touch UI component by adding a drop-down control and use a DataSource object to populate it. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy