Smartphone

Goal

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


Component XML - /apps/eaem/image

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root   
 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    
 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