AEM 61 - Sling Resource Merger To Extend Touch UI Component Dialog

Goal

This simple post is on extending Touch UI foundation component cq:dialog to add more input widgets. For details on sling resource mergercheck adobe documentation


Product Image Component Dialog - /libs/foundation/components/image/cq:dialog




Dialog of Image Component Extension - /apps/eaem/image/cq:dialog




Image Component Extension Dialog Structure in CRXDE Lite




Component XML - /apps/eaem/image

<?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="EAEM Image"
    sling:resourceSuperType="foundation/components/image"
    allowedParents="[*/parsys]"
    componentGroup="General"/>

Line 5 sling:resourceSuperType="foundation/components/image" makes the component an extension of foundation image component /libs/foundation/components/image


Image Component Extension Dialog As XML - /apps/eaem/image/cq:dialog

<?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="Image"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="en/cq/current/wcm/default_components.html#Image">
<content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
<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">
<disclaimer
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/textarea"
                        fieldLabel="Disclaimer"
                        name="./disclaimer"/>
</items>
</column>
</items>
</content>
</jcr:root>

Without copying the entire dialog of foundation image component, using sling resource merger the dialog was extended to add a widget for text disclaimer