Touch UI Component Dialog Examples

The following chapters each present a coral xml snippet which can be copied into any /components/mycomponent/_cq_dialog/.content.xml file.

Documentation Overview

AEM Component Help Pages

Open the CRXDE http://localhost:4502/crx/de/index.jsp console.
Go to the component path. Example: /apps/<projectname>/components/some/text.
Now create a new markdown file inside the component called README.md.
Add any documentation content you need.
Now go to http://localhost:4502/libs/wcm/core/content/sites/components.html and select Title Component from the list with a valid Component Group.
Now copy the URL from the address bar. In my case the URL is /mnt/overlay/wcm/core/content/sites/components/details.html/apps/<projectname>/components/some/text.
Go to the component within CRXDE Lite > cq:dialog and set the helpPath property to the value of the path copied above.

helpPath="/mnt/overlay/wcm/core/content/sites/components/details.html/apps/<projectname>/components/some/text"

Now enable and add the component to the page, open the dialogue and click on the Help (?) icon.

Set Documentation as Default Active Tab

In order to show documentation as the default active tab when the author clicks on the Help (?) icon, We need to overlay an AEM’s node. Just follow these steps.

Go to the CRXDE Lite console http://localhost:4502/crx/de/index.jsp
Go to /libs/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation.
Right click on the documentation node and select the Overlay Node option.

Path: /libs/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation
Overlay Location: /apps/
Match node types: checked

Now go to the overlay path inside the /apps folder /apps/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation. Click on the documentation node and set the following property sling:orderBefore (String) : fixedColumnContainer

ui.apps/src/main/content/jcr_root/apps/wcm/core/content/sites/components/details/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="cq:Page">
    <jcr:content
        jcr:primaryType="nt:unstructured">
        <content
            jcr:primaryType="nt:unstructured">
            <single jcr:primaryType="nt:unstructured">
                <content
                    jcr:primaryType="nt:unstructured">
                    <items jcr:primaryType="nt:unstructured">
                        <content
                            jcr:primaryType="nt:unstructured">
                            <items jcr:primaryType="nt:unstructured">
                                <tabs
                                    jcr:primaryType="nt:unstructured">
                                    <items jcr:primaryType="nt:unstructured">
                                        <documentation
                                            jcr:primaryType="nt:unstructured"
                                            sling:orderBefore="fixedColumnContainer"/>
                                    </items>
                                </tabs>
                            </items>
                        </content>
                    </items>
                </content>
            </single>
        </content>
    </jcr:content>
</jcr:root>

Source

Empty Dialog / Starting Point

This is an empty dialog structure and components can be placed in tabs (you can add n tabs.)

/components/mycomponent/_cq_dialog/.content.xml
<?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="MyTestComponent"
          sling:resourceType="cq/gui/components/authoring/dialog"
          helpPath="https://url-to-your-documentation.com">
    <content
            granite:class="cmp-mytestcmp__editor"
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Properties"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                    margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                        <!--  Place your components / dialog fields here  -->
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <layout
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Layout
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                    margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                        <!--  Place your components / dialog fields here  -->
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </layout>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

You can write a class or id to your dialog fragment by adding granite:class="some-css-class" or granite:id="some-id". Add required="{Boolean}true" to any component field to mark it as required.

Note, that the actual xml item element tag name, can be anything, as long as its unique for this component. For example, the Alert field xml does not need to be named alert.

AEM Component Help Pages​

Set Documentation as Default Active Tab​

Empty Dialog / Starting Point​

Simple Data Fields​

Textfield​

Textarea​

Numberfield​

Pathfield​

Pathbrowser​

Asset Upload​

Checkbox​

Switch​

Datepicker​

Userpicker​

Authorizable Autocomplete​

Complex Data Fields​

Select Dropdown​

Radio Select​

Multifield​

Accordion​

Layout & Read Only​

Alert​

Hyperlink​

Text​

Heading​

Well​

Full XML Example​

AEM Component Help Pages

Set Documentation as Default Active Tab

Empty Dialog / Starting Point

Simple Data Fields

Textfield

Textarea

Numberfield

Pathfield

Pathbrowser

Asset Upload

Checkbox

Switch

Datepicker

Userpicker

Authorizable Autocomplete

Complex Data Fields

Select Dropdown

Radio Select

Multifield

Accordion

Layout & Read Only

Alert

Hyperlink

Text

Heading

Well

Full XML Example