AEM Add new tab to dialog of OOTB page component touch UI dialog

Question

I want to add a new tab to the OOTB page component touch UI dialog (/libs/foundation/components/page), so that all pages that inherit from that OOTB component will have these fields.

It's unfortunately not an option to just add the tab to each template component, as I'm building a plugin instead of an implementation.

I have been trying to overlay /libs/foundation/components/page/_cq_dialog/content/items/tabs/items/ and add just my tab to that leaf items node, but then it doesn't pull the rest of the OOTB tabs. I think it's because it's not a leaf node, and it wants to be when doing overlay. So I need to somehow merge what I'm defining with the OOTB touch ui dialog.

This is my /apps/foundation/components/page/_cq_dialog node:

<?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="Page"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties]"
          mode="edit">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container"
            class="cq-dialog-content-page">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container"
                    rel="cq-siteadmin-admin-properties-tabs">
                <layout
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/layouts/tabs"
                        type="nav"/>
                <items jcr:primaryType="nt:unstructured">
                    <custom
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Custom"
                            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">
                                    <customsection
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Custom field"
                                            sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <customfield
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                    fieldLabel="custom field"
                                                    name="customField"/>
                                        </items>
                                    </customsection>
                                </items>
                            </column>
                        </items>
                    </custom>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Thank you!

Answer 1

The reason you are not seeing the rest of the tabs from the foundation page component is because you are overlaying the root items node of all the tabs. When you overlay you are redefining the functionality of the libs component and giving precedence to the overlayed component. If you'd like to have the rest of the tabs as well, you'll have to copy them all to your overlayed component, which is highly not recommended because you will lose out on upgrades to the component when you upgrade AEM or install service packs down the line.

I would recommend extending the component instead by setting a value of sling:resourceType to foundation/components/page in the base page component of your site. This way you add just that extra custom tab and inherit the rest of them from libs. In all probability (if following aem best practices), your site would already have a base page component having this property and the rest of the templates would be inheriting from this component. Add the below _cq_dialog to that page component and you should see the new tab across all the pages.

.content.xml of your base page component. One of the main templates from /apps/<<prj>>/templates will have a sling:resourceType linking to this page component.

<?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"
    jcr:primaryType="cq:Component"
    jcr:title="Base Page Component"
    sling:resourceSuperType="foundation/components/page"
    componentGroup=".hidden"/>

_cq_dialog - reusing your code except for a new prop - sling:orderBefore="cloudservices", to order your new tab

<?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">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <custom
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Custom"
                        sling:orderBefore="cloudservices"
                        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">
                                    <customsection
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="Custom field"
                                        sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <customfield
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                fieldLabel="custom field"
                                                name="customField"/>
                                        </items>
                                    </customsection>
                                </items>
                            </column>
                        </items>
                    </custom>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Screenshot

More about component hierarchy and inheritance here