AEM 6:: Dynamic tabs

Question

I have created a component that has a dialog. The dialog has a tab which has a dropdown. Value selected in the dropdown opens up a new tab. It is a little different from the OOTB list component in the way that changing the value in dropdown does not close the previously opened tab. That means whenever a new value is selected from the dropdown a new tab opens and it doesn't override any other tab. I have been able to achieve this much. And this is where I am facing the issue: When I fill in the values in all the tabs and then save and close the dialog and then reopen it, I can see only one tab that was the last to be opened through dropdown.

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    height="{Long}400"
    manageTabs="function(tab,noSwitch){var tabs=['list','plansbenefits','claimsbalances','prescriptions','findpricecare','healthwellness','customerservice','chat','related'];var index=tabs.indexOf(tab);if(index==-1) return;for(var i=1;i&lt;tabs.length;i++){if(index==i){this.unhideTabStripItem(i);}}this.doLayout();if(!noSwitch)this.activate(index);}"
    title="Sub-Footer"
    width="{Long}700"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <list
            jcr:primaryType="cq:Widget"
            title="Footer Properties"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <optionsFrom
                    jcr:primaryType="cq:Widget"
                    defaultValue=""
                    fieldLabel="Choose from the options"
                    name="./optionsFrom"
                    type="select"
                    xtype="selection">
                    <listeners
                        jcr:primaryType="nt:unstructured"
                        loadcontent="function(){this.findParentByType('tabpanel').manageTabs(this.getValue(),true);}"
                        selectionchanged="function(box,value){box.findParentByType('tabpanel').manageTabs(value);}"/>
                    <options jcr:primaryType="cq:WidgetCollection">
                        <plansbenefits
                            jcr:primaryType="nt:unstructured"
                            text="Plans &amp; Benefits"
                            value="plansbenefits"/>
                        <claimsbalances
                            jcr:primaryType="nt:unstructured"
                            text="Claims &amp; Balances"
                            value="claimsbalances"/>
                        <prescriptions
                            jcr:primaryType="nt:unstructured"
                            text="Prescriptions"
                            value="prescriptions"/>
                        <findpricecare
                            jcr:primaryType="nt:unstructured"
                            text="Find &amp; Price Care"
                            value="findpricecare"/>
                        <healthwellness
                            jcr:primaryType="nt:unstructured"
                            text="Health &amp; Wellness"
                            value="healthwellness"/>
                        <customerservice
                            jcr:primaryType="nt:unstructured"
                            text="Customer Service"
                            value="customerservice"/>
                        <chat
                            jcr:primaryType="nt:unstructured"
                            text="Chat"
                            value="chat"/>
                        <related
                            jcr:primaryType="nt:unstructured"
                            text="Related"
                            value="related"/>
                    </options>
                </optionsFrom>
            </items>
        </list>
        <plansbenefits
            jcr:primaryType="cq:Widget"
            title="Plans &amp; Benefits"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Plans &amp; Benefits"
                    emptyText="Plans &amp; Benefits"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicsplansandbenefits"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </plansbenefits>
        <claimsbalances
            jcr:primaryType="cq:Widget"
            title="Claims &amp; Balances"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(2); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Claims &amp; Balances"
                    emptyText="Claims &amp; Balances"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicsclaimsbalances"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </claimsbalances>
        <prescriptions
            jcr:primaryType="cq:Widget"
            title="Prescriptions"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(3); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Prescriptions"
                    emptyText="Prescriptions"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicsprescriptions"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </prescriptions>
        <findpricecare
            jcr:primaryType="cq:Widget"
            title="Find &amp; Price Care"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(4); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Find &amp; Price Care"
                    emptyText="Find &amp; Price Care"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicsfindpricecare"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </findpricecare>
        <healthwellness
            jcr:primaryType="cq:Widget"
            title="Health &amp; Wellness"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(5); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Health &amp; Wellness"
                    emptyText="Health &amp; Wellness"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topics"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </healthwellness>
        <customerservice
            jcr:primaryType="cq:Widget"
            title="Customer Service"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(6); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Customer Service"
                    emptyText="Customer Service"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicscustomerservice"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </customerservice>
        <chat
            jcr:primaryType="cq:Widget"
            title="Chat"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(7); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Chat"
                    emptyText="Chat"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicschat"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </chat>
        <related
            jcr:primaryType="cq:Widget"
            title="Related"
            xtype="panel">
            <listeners
                jcr:primaryType="nt:unstructured"
                render="function() { this.findParentByType('tabpanel').hideTabStripItem(8); }"/>
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="Related"
                    emptyText="Related"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <topics
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Press + to add more topics"
                    fieldLabel="Configure Topics"
                    name="./topicsrelated"
                    width="1000"
                    xtype="multifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        name="./fieldConfig"
                        xtype="multifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <topic
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the title for the topic"
                                fieldLabel="Topic Title"
                                key="topic"
                                width="600"
                                xtype="pathfield"/>
                            <url
                                jcr:primaryType="cq:Widget"
                                fieldDescription="Please enter the URL for the topic"
                                fieldLabel="Topic URL"
                                key="url"
                                rootPath="/content/xxxxx"
                                width="600"
                                xtype="pathfield"/>
                            <check
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Is External?"
                                key="check"
                                xtype="checkbox"/>
                        </items>
                    </fieldConfig>
                </topics>
            </items>
        </related>
    </items>
</jcr:root>

Here is the use case:

1) Open the dialog for the component.

2) Select a value from the dropdown on first tab. A new tab will open up. Call it tab A. Author it.

3) Select another value from the dropdown on the first tab. Another tab will open up. Call it tab B. Author it.

4) Save and close the dialog

5) Reopen the dialog.

You will see that only the tab B is visible. Ideally both tab A and tab B should have been visible.

Thanks in advance

Answer 1

Looking at the code example above, the callback function registered against the optionsFrom node loadcontent listener will only show one tab, since there is (presumably) only one value stored in the optionsFrom property. To provide the behaviour you are looking for, the function invoked by the loadcontent listener could look at the node repository to establish which tabs have data stored against them, before deciding whether to show or hide each tab respectively.