Creating a Basic AEM Touch UI Dialogue

In this article, we will step through the steps of creating a new Touch UI dialogue configuration within your AEM maven project. Code examples will showcase a basic Granite UI form container & component.

Create basic Touch UI Dialogue

Within your AEM maven source code, create create a “_cq_dialogue” folder under your targeted component. Example: /apps/weretail/components/content/text.
Result: /apps/weretail/components/content/text/_cq_dialogue, .
Within the _cq_dialogue, create a .content.xml file: .

Now lets paste in the basic Touch UI XML structure into the .content.xml file as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Use your maven skills, and build your code into AEM.
When we open the Touch UI dialogue, the Touch UI container should remain empty, and should look something like this:

Now lets include the textfield component into the Touch UI dialogue container:

To learn how to write your own XML formatted Granite UI 1.0 form components, check out this article.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Granite UI Converting to XML, Example"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<labelTextfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Label: labelTextfield"
name="./labelTextfield"
value="{String}Default Text"
emptyText="Show placeholder text when input field is empty."
disabled="{Boolean}false"
required="{Boolean}true"
autocomplete="off"
autofocus="{Boolean}true"
validation=""
maxlength="{Long}100"/>
</items>
</content>
</jcr:root>

Use your maven skills, and build your code into AEM.
final result:

Learn More:
To learn how to write your own XML formatted Granite UI 1.0 form components, check out this article.

Pro Tip: Have the AEM Granite UI 1.0 Form Component’s XML Reference Guide opened in another tab, and accessible during development of Touch UI dialogues.

Creating a Basic AEM Touch UI Dialogue