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
1. 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, .

2. Within the _cq_dialogue, create a .content.xml file: 

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

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

            <!--

               ... insert Granite UI form components here.

           -->

        </items>

    </content>

</jcr:root>

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

6. Now, let's include the textfield component into the Touch UI dialogue container:

<?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>

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