Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

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

Avatar

Level 4

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

4 Replies

Avatar

Correct answer by
Level 10

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

Avatar

Level 4

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.

Avatar

Level 4

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 ?

Avatar

Level 10

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