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, _cq_dialogue folder.
  2. Within the _cq_dialogue, create a .content.xml file: _cq_dialogue .context.xml file.
  3. 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
    <?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">
                <!--
                   ... 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:
    granit-ui-example-no-form-component
  6. 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>
  7. Use your maven skills, and build your code into AEM.
  8. final result:
    granite UI completed example
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.

Was this post helpful?

Certified AEM Developer who has been working on AEM software developer for the past 5 years.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top