AEM 6: Not able to load tabs on the change of value in dropdown

[AEM_newbie]

I am trying to load the tabs as per the change of value in dropdown. I am getting the error box.findParentByType(...).manageTabs is not a function. Here is the code:

<?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}600" manageTabs="function(tab,noSwitch){var tabs=['tab1','tab2','tab3'];var index=tabs.indexOf(tab);if(index==-1) return;for(var i=5;i&amp;lt;tabs.length;i++){if(index==i){this.unhideTabStripItem(i);}else{this.hideTabStripItem(i);}}this.doLayout();if(!noSwitch)this.activate(index);}" title="Campaign Tiles Configurations" width="{Long}1000" xtype="dialog"> <items jcr:primaryType="cq:Widget" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <tab1 jcr:primaryType="cq:Panel" title="Campaign Tiles"> <items jcr:primaryType="cq:WidgetCollection"> <campaigns jcr:primaryType="cq:Widget" fieldDescription="Press + to add more" fieldLabel="Configure Tiles" name="./campaigns" width="1000" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" name="./fieldConfig" xtype="multifieldpanel"> <items jcr:primaryType="cq:WidgetCollection"> <headline jcr:primaryType="cq:Widget" fieldDescription="Provide headline for the individual tile" fieldLabel="Headline" key="headline" width="{Long}560" xtype="textfield"/> <iconImage jcr:primaryType="cq:Widget" fieldDescription="Drag and drop or select the image in this field" fieldLabel="Icon Image" key="iconImage" rootPath="/content/dam" width="{Long}560" xtype="ddpathfield"/> <description jcr:primaryType="cq:Widget" fieldDescription="Provide description for the individual tile" fieldLabel="Description" key="description" width="{Long}560" xtype="textfield"/> <subdescription jcr:primaryType="cq:Widget" fieldDescription="Provide sub-description for the individual tile. Use the mapping {{name}} above." fieldLabel="Sub-description" key="subdescription" width="{Long}560" xtype="textfield"/> <buttonText jcr:primaryType="cq:Widget" fieldDescription="Text to be applied on the button" fieldLabel="Button Text" key="buttonText" width="{Long}560" xtype="textfield"/> <url jcr:primaryType="cq:Widget" fieldDescription="URL on which the page navigates after the button is clicked" fieldLabel="URL" key="url" rootPath="/content/myuhc" width="{Long}560" xtype="pathfield"/> <external jcr:primaryType="cq:Widget" fieldLabel="Open in a separate tab ?" key="external" labelStyle="width:155px" xtype="checkbox"/> <visible jcr:primaryType="cq:Widget" fieldLabel="Make VISIBLE?" key="visible" labelStyle="width:155px" xtype="checkbox"/> <selectList jcr:primaryType="cq:Widget" allowBlank="{Boolean}false" fieldDescription="These are the items on which the rules selected above will be applied" fieldLabel="Provide Options" key="selectList" 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"> <claims jcr:primaryType="nt:unstructured" key="claims" text="Claims" value="claims"/> <plansandbenefits jcr:primaryType="nt:unstructured" key="plansandbenefits" text="Plans &amp; Benefits" value="plansandbenefits"/> </options> </selectList> </items> </fieldConfig> </campaigns> </items> </tab1> <tab2 jcr:primaryType="cq:Widget" anchor="100%" title="Campaign Placeholders" xtype="panel"> <listeners jcr:primaryType="nt:unstructured" render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"/> <items jcr:primaryType="cq:WidgetCollection"> <campaign_placeholders jcr:primaryType="cq:Widget" defaultValue="[{name},{DoB}]" disabled="{Boolean}true" emptyText="[{name},{DoB}]" fieldDescription="These placeholders should be used while creating content. These are responsible for binding data from the back end." fieldLabel="Placeholders" name="/placeholders" xtype="textarea"/> </items> </tab2> <tab3 jcr:primaryType="cq:Widget" anchor="100%" title="Plans &amp; Benefits Placeholders" xtype="panel"> <listeners jcr:primaryType="nt:unstructured" render="function() { this.findParentByType('tabpanel').hideTabStripItem(2); }"/> <items jcr:primaryType="cq:WidgetCollection"> <plansbenefits_placeholders jcr:primaryType="cq:Widget" defaultValue="[{name},{DoB}]" disabled="{Boolean}true" emptyText="[{name},{DoB}]" fieldDescription="These placeholders should be used while creating content. These are responsible for binding data from the back end." fieldLabel="Placeholders" name="/placeholders" xtype="textarea"/> </items> </tab3> </items> </items> </jcr:root>

The difference here is that the options dropdown lives in a multifield.

Thanks in advance

[smacdonald2008 · Accepted solution]

See this AEM community article - we talk about how to dynamically use a custom XTYPE (JS script) that updates widgets using event handlers:

https://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

[AEM_newbie]

Thanks for this. But I am finding it a little challenging to connect the dots here. I have hardly worked on ExtJS. Is it possible for you to point out what exactly am I missing in my code and what do I change ? A little more little I have borrowed the idea from OOTB list component.

[AEM_newbie]

Just an update. So, I actually got that working by changing the structure a little: Here is the updated code:

<?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" boxMinHeight="{Long}600" boxMinWidth="{Long}1000" height="{Long}600" manageTabs="function(tab,noSwitch){var tabs=['campaign','claims','benefits'];var index=tabs.indexOf(tab);if(index==-1) return;for(var i=1;i&lt;tabs.length;i++){if(index==i){this.unhideTabStripItem(i);}else{this.hideTabStripItem(i);}}this.doLayout();if(!noSwitch)this.activate(index);}" title="Campaigns" width="{Long}1000" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <campaign jcr:primaryType="cq:Widget" height="{Long}600" title="Campaigns" width="{Long}1000" xtype="panel"> <items jcr:primaryType="cq:WidgetCollection"> <campaigns jcr:primaryType="cq:Widget" fieldDescription="Press + to add more" fieldLabel="Configure Tiles" name="./campaigns" width="1000" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" name="./fieldConfig" xtype="multifieldpanel"> <items jcr:primaryType="cq:WidgetCollection"> <headline jcr:primaryType="cq:Widget" fieldDescription="Provide headline for the individual tile" fieldLabel="Headline" key="headline" width="{Long}560" xtype="textfield"/> <iconImage jcr:primaryType="cq:Widget" fieldDescription="Drag and drop or select the image in this field" fieldLabel="Icon Image" key="iconImage" rootPath="/content/dam" width="{Long}560" xtype="ddpathfield"/> <description jcr:primaryType="cq:Widget" fieldDescription="Provide description for the individual tile" fieldLabel="Description" key="description" width="{Long}560" xtype="textfield"/> <subdescription jcr:primaryType="cq:Widget" fieldDescription="Provide sub-description for the individual tile. Use the mapping {{name}} above." fieldLabel="Sub-description" key="subdescription" width="{Long}560" xtype="textfield"/> <buttonText jcr:primaryType="cq:Widget" fieldDescription="Text to be applied on the button" fieldLabel="Button Text" key="buttonText" width="{Long}560" xtype="textfield"/> <url jcr:primaryType="cq:Widget" fieldDescription="URL on which the page navigates after the button is clicked" fieldLabel="URL" key="url" rootPath="/content/myuhc" width="{Long}560" xtype="pathfield"/> <external jcr:primaryType="cq:Widget" fieldLabel="Open in a separate tab ?" key="external" labelStyle="width:155px" xtype="checkbox"/> <visible jcr:primaryType="cq:Widget" fieldLabel="Make VISIBLE?" key="visible" labelStyle="width:155px" xtype="checkbox"/> <selectList jcr:primaryType="cq:Widget" allowBlank="{Boolean}false" fieldDescription="These are the items on which the rules selected above will be applied" fieldLabel="Provide Options" key="selectList" 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"> <claims jcr:primaryType="nt:unstructured" text="Claims" value="claims"/> <benefits jcr:primaryType="nt:unstructured" text="Benefits" value="benefits"/> </options> </selectList> </items> </fieldConfig> </campaigns> </items> </campaign> <claims jcr:primaryType="cq:Widget" height="{Long}600" title="Claims" width="{Long}1000" xtype="panel"> <listeners jcr:primaryType="nt:unstructured" render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"/> <items jcr:primaryType="cq:WidgetCollection"> <parentPage jcr:primaryType="cq:Widget" fieldDescription="Leave empty to use current page" fieldLabel="Parent page" name="./parentPage" xtype="pathfield"/> </items> </claims> <benefits jcr:primaryType="cq:Widget" height="{Long}600" title="Benefits" width="{Long}1000" xtype="panel"> <listeners jcr:primaryType="nt:unstructured" render="function() { this.findParentByType('tabpanel').hideTabStripItem(2); }"/> <items jcr:primaryType="cq:WidgetCollection"> <ancestorPage jcr:primaryType="cq:Widget" fieldDescription="Leave empty to use current page" fieldLabel="Parent page" name="./ancestorPage" xtype="pathfield"/> </items> </benefits> </items> </jcr:root>

But now I am not able to change the height of the parent tabpanel at the topmost level. Height and width properties are not working. Do i need to change the layout ? I am not sure. Any pointers ?

[smacdonald2008]

Package up your code and sent to me scottm@adobe.com.  I will look.