AEM Touch UI (Granite UI) Tabs: Example Code

Almost all components require developers to put together the Touch UI experience with tabs as the base of their components. It’s a simple XML code configuration, however, sometimes finding the reference isn’t that easy to find online. This article is just a simple reference article where I share the configuration as XML, so it can be copied and pasted + ready to go at a rapid pace.

This code was extracted from Adobe’s code, the WCM Core Components v2.22.6 Latest; so no surprises.

Jump to Code Snippet

Granite UI (Touch UI) Rendered as

This is a screenshot of how a very basic Touch UI would look like for author’s when the author double clicks on the component to make change’s to it.

Jump to Code Snippet

Code Snippet

The solution below includes an example with the “styletab” which is an out-of-the-box feature for the AEM Style System. You can copy and paste this snippet into your .content.xml, like _cq_dialog/.content.xml:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<?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="Example Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
granite:class="cmp-button__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">
<tab1
jcr:primaryType="nt:unstructured"
jcr:title="Tab 1"
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">
<exampleinputfield1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Example input 1 field can be placed here"
fieldLabel="Example Input Field 1"
name="./exampleinputfield1"/>
<examplepathfield1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Example path field 1 field can be placed here"
fieldLabel="Example Path Field 1"
name="./examplepathfield1"
rootPath="/content"/>
</items>
</column>
</items>
</columns>
</items>
</tab1>
<tab2
jcr:primaryType="nt:unstructured"
jcr:title="Tab 2"
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">
<exampleinputfield2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Example input 1 field can be placed here"
fieldLabel="Example Input Field 2"
name="./exampleinputfield2"/>
<examplepathfield2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Example path field 2 field can be placed here"
fieldLabel="Example Path Field 2"
name="./examplepathfield2"
rootPath="/content"/>
</items>
</column>
</items>
</columns>
</items>
</tab2>
<cq:styles
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/>
</items>
</tabs>
</items>
</content>
</jcr:root>

Extras

If you would like to enable your component for the AEM Style System, click here, How to Enable AEM Style System Configuration for Components.

AEM Touch UI (Granite UI) Tabs: Example Code