Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

suvasishm
Level 2
Level 2

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, not it is saving the information of that tab(componentImageSelection).

Any suggestion is highly appreciated.

0 Replies