AEM: Trying to reuse existing image dialog in other dialog. Tabs within tab not working when including the image dialog using cqinclude

Question

I've a component with a dialog that has multiple tabs. Some of the tabs are widget of xtype="html5smartimage" to accept image and other tabs are meant to accept different image parameter.

I've split the dialog in two parts to make tab system available for reuse by other component. Here it goes:

imageComponent

tab_image_information.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:TabPanel"
    activeTab="0"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <imageTab1 jcr:primaryType="cq:Widget"
            itemId="imageTab1"
            cropParameter="./image1/imageCrop"
            ddGroups="[media]"
            fileNameParameter="./image1/fileName"
            fileReferenceParameter="./image1/fileReference"
            blankText="An image is required"
            name="./image1/file"
            requestSuffix="/image1.img.png"
            rotateParameter="./image1/imageRotate"
            sizeLimit="100"
            height="250"
            title="Desktop Image"
            uploadUrl="/tmp/upload/*"
            xtype="html5smartimage" />
        <imageTab2 jcr:primaryType="cq:Widget"
            itemId="imageTab2"
            cropParameter="./image2/imageCrop"
            ddGroups="[media]"
            fileNameParameter="./image2/fileName"
            fileReferenceParameter="./image2/fileReference"
            blankText="An image is required"
            name="./image2/file"
            requestSuffix="/image2.img.png"
            rotateParameter="./image2/imageRotate"
            sizeLimit="100"
            height="250"
            title="Tablet Image"
            uploadUrl="/tmp/upload/*"
            xtype="html5smartimage" />        
        <imageDetails jcr:primaryType="cq:Widget"
            title="Image Details"
            height="250"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <displayWidth jcr:primaryType="cq:Widget"
                    fieldDescription="Set display width for the image."
                    fieldLabel="Display Width"
                    name="./displayWidth"
                    xtype="textfield"/>
                <displayHeight jcr:primaryType="cq:Widget"
                    fieldDescription="Set display height for the image."
                    fieldLabel="Display Height"
                    name="./displayHeight"
                    xtype="textfield"/>
                <image1ResType jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image1/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden" />
                <image2ResType jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image2/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden" />
            </items>
        </imageDetails>
    </items>
</jcr:root>

and in dialog.xml I did:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="Image Selection"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <imageSelection jcr:primaryType="cq:Widget"
            path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
            xtype="cqinclude"/>
    </items>
</jcr:root>

This component itself is working great.

Now I need to write another component (myComponent) whose dialog will have two tabs - one for basic information and the other tab will have functionality of the imageCompnent. So I'm trying to include tab_image_information using infinity.json. Here goes myComponent:

myComponent

tab_basic_information.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Panel"
    title="Component Information"
    width="500">
    <items jcr:primaryType="cq:WidgetCollection">
        <text1 jcr:primaryType="cq:Widget"
            fieldLabel="Headline"
            name="./text1"
            xtype="textfield"
            maxlength="42"/>
        <text2 jcr:primaryType="cq:Widget"
            fieldLabel="Sub head"
            name="./text2"
            xtype="textfield"
            maxlength="42"/>
    </items>
</jcr:root>

and the dialog.xml is like:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="My Component"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <tabs jcr:primaryType="cq:TabPanel">
            <items jcr:primaryType="cq:WidgetCollection">
                <componentInformation
                    jcr:primaryType="cq:Widget"
                    path="/apps/myproject/components/content/myComponent/tab_basic_information.infinity.json"
                    xtype="cqinclude"/>
                <componentImageSelection
                    jcr:primaryType="cq:Widget"
                    title="Component Image Selection"
                    xtype="panel"
                    width="500">
                    <items jcr:primaryType="cq:WidgetCollection">                        
                        <imageSelection
                            jcr:primaryType="cq:Widget"
                            path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
                            xtype="cqinclude"/>
                    </items>
                </componentImageSelection>
            </items>
        </tabs>
    </items>
</jcr:root>

Inclusion of tab_image_information within myComponent dialog is happening, but it not laying out properly, neither it is saving the information of that tab(componentImageSelection).

Any suggestion is highly appreciated.

Answer 1

Your tab_image_information is correct and is of type cq:TabPanel while the other tab_basic_information is of type cq:Panel instead try using cq:TabPanel for it. I think this should resolve the layout issue, this is just my initial guess better add screenshot to get more understanding of what is exact layout issue. On the saving part what is getting saved in JCR ? See the request in network tab when you post your data i.e. when you are done configuring and click ok. One more way to store data in JCR is to create your custom servlet to post the data instead of using the OOTB one. Hope this helps. Also tag your question with extjs this will really help on layout issues.