AEM 6.1 Add Tab to Touch UI Page Properties

Question

I am trying to get adding new tabs and removing tabs/items in Page Properties working.

So far I have read through this similar question: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__m3tp-there_is_anarticle.html

Which lead me to these Adobe links and the github example:

I have copied the github example of a .context.xml for the page's Page Properties and it is not hiding anything.

I also replaced cq:showOnCreate="{Boolean}false" with cq:hideOnEdit="{Boolean}true" like the previous adobe help forum suggested and this does not work either.

How do I hide and show items?

Also, in the past with Classic UI we were able to do something like this to include more tabs:

<sample
jcr:primaryType="cq:Widget"
path="/apps/company/components/Pages/basePage/sample_tab.infinity.json"
xtype="cqinclude"/>

How do I add new tabs in Touch UI with something similar to infinity.json? Granite include?

nateyolles nateyolles · Accepted Answer · 2016-05-31T23:30:21

You can reuse tabs in Touch just as you can in Classic by using granite/ui/components/foundation/include with the path property.

In the following example we have a Heading component that includes a normal text widget and pulls in a reusable Component Settings tab. I've placed the shared tabs under /apps/mysite/dialogs/granite/tabs but that's not a requirement, you can simply update the path property.

This is the component dialog at /apps/mysite/components/heading/_cq_dialog.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Heading"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="en/cq/current/wcm/default_components.html#Carousel">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <generalSettings
                jcr:primaryType="nt:unstructured"
                jcr:title="General Settings"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <headingText
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldLabel="Text"
                                name="./text"/>
                        </items>
                    </column>
                </items>
            </generalSettings>
            <componentSettings
                jcr:title="Component Settings"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/include"
                path="mysite/dialogs/granite/tabs/componentSettings"/>
        </items>
    </content>
</jcr:root>

The reusable Component Settings tab lives at /apps/mysite/dialogs/granite/tabs/componentSettings.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Settings"
    sling:resourceType="granite/ui/components/foundation/section">
    <layout
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
        margin="{Boolean}false"/>
    <items jcr:primaryType="nt:unstructured">
        <column
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <componentId
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                    fieldLabel="Component Id"
                    name="./componentId"/>
            </items>
        </column>
    </items>
</jcr:root>

AEM 6.1 Add Tab to Touch UI Page Properties

1 Answers