Default Selections - Multiple Tabbers

[cartercjb]

I am trying to make two dynamically related tabbers that behave like this:

TABBER 1: has 5 tabs with FINANCIAL as the default selection. This works without any issues.

Tabber 2: I am trying to incorporate a 2nd tabber that is dependent on the CASELOAD tab only. When tabs 1,2,4,5 are selected this second tab should deactivate. When the Caseload tab is selected,  the 2nd tabber should activate and default to PDPM. 

Any ideas on how to achieve this?

Thanks!

-Carter

[Patrykked]

Hello Carter,

You can add this second Tabber to the IDs of widgets you are showing and hiding in the first Tabber. Just copy it's ID, add it for the widgets to be shown for CASELOAD, and add it to be hidden for every other case. And the second one just set up as you wish, and then it should work as you described it above!

Please let me know if that works for you,

If not - I can prepare a little instruction for you to show this functionality.

Best Regards,

Patryk QbeeQ

[cartercjb]

Thank you for your feedback, @Patrykked!

Here is the code for my parent tabber:

widget.on('render',function(w, e) {
  e.prefixText = '';
  e.suffixText = '';
  e.selectedColor = '#A90A40'; /*The color of the chosen title*/
  e.fontColor = '#cccccc'; /*The color of the unchosen titles*/
  e.elementWidth = '103%';
  e.descColor = '#a5a5a5';
  e.parentMarginLeft = '-15px';
  e.height = 32; /* affects the tabber widget default high*/
});

widget.tabs =  [{title: "FINANCIAL", displayWidgetIds : ["6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f"],	
						hideWidgetIds : ["62448914d80c3a3f50af2ced","6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aac7","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aac5","6231ebbcbe4b2e2fc893aaca","6231ebbcbe4b2e2fc893aacb",
										 "6231ebbcbe4b2e2fc893aad0","6231ebbcbe4b2e2fc893aacc","6231ebbcbe4b2e2fc893aace", "6231ebbcbe4b2e2fc893aacd","6231ebbcbe4b2e2fc893aacf","6244228220c4e50f949261fc","62446773d80c3a3f50af2884","624465b2d80c3a3f50af2752","624483d4d80c3a3f50af2b77"
										]},
				{title: "DELIVERY METRICS", 
							displayWidgetIds : ["6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aac7"],	
							hideWidgetIds : ["62448914d80c3a3f50af2ced","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aac5","6231ebbcbe4b2e2fc893aaca","6231ebbcbe4b2e2fc893aacb",
										 "6231ebbcbe4b2e2fc893aad0","6231ebbcbe4b2e2fc893aacc","6231ebbcbe4b2e2fc893aace", "6231ebbcbe4b2e2fc893aacd","6231ebbcbe4b2e2fc893aacf","6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f","6244228220c4e50f949261fc","6231ebbcbe4b2e2fc893aac5"
											,"62446773d80c3a3f50af2884","624465b2d80c3a3f50af2752","624483d4d80c3a3f50af2b77"]},			
				{title: "CASELOAD", 
							displayWidgetIds : ["62448914d80c3a3f50af2ced","6244228220c4e50f949261fc","6231ebbcbe4b2e2fc893aac5","624465b2d80c3a3f50af2752","624483d4d80c3a3f50af2b77"],	
							hideWidgetIds : ["6231ebbcbe4b2e2fc893aaca","6231ebbcbe4b2e2fc893aacb","6231ebbcbe4b2e2fc893aad0","6231ebbcbe4b2e2fc893aace","6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aacd","6231ebbcbe4b2e2fc893aac7","6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aacc"]},			
				{title: "PDPM DISTRIBUTION", 
				 			displayWidgetIds : ["6231ebbcbe4b2e2fc893aaca","6231ebbcbe4b2e2fc893aad0", "6231ebbcbe4b2e2fc893aacf"],	
							hideWidgetIds : ["62448914d80c3a3f50af2ced","624483d4d80c3a3f50af2b77","6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aac7", "6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f","6231ebbcbe4b2e2fc893aacb","6244228220c4e50f949261fc","6231ebbcbe4b2e2fc893aac5",
											"62446773d80c3a3f50af2884","624465b2d80c3a3f50af2752","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aacd","6231ebbcbe4b2e2fc893aace"]},
				{title: "OTHER", 
				 			displayWidgetIds : ["6231ebbcbe4b2e2fc893aacc","6231ebbcbe4b2e2fc893aacb","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aace","6231ebbcbe4b2e2fc893aacd"],	
							hideWidgetIds : ["62448914d80c3a3f50af2ced","6231ebbcbe4b2e2fc893aaca","624483d4d80c3a3f50af2b77"]},
            ]; 
                        
                         
widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "FINANCIAL")

                        
                        
                        
                        

 Here is the code for my child tabber: 

widget.tabs =  [
{title: "PDPM", 
							displayWidgetIds : ["6244228220c4e50f949261fc","6231ebbcbe4b2e2fc893aac5",],	
							hideWidgetIds : ["6231ebbcbe4b2e2fc893aace","6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aacd","624465b2d80c3a3f50af2752","6231ebbcbe4b2e2fc893aac7","6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aacc"]},			
				{title: "LEVEL HMO", 
							displayWidgetIds : ["6231ebbcbe4b2e2fc893aac5","624465b2d80c3a3f50af2752"],	
							hideWidgetIds : ["6244228220c4e50f949261fc","6231ebbcbe4b2e2fc893aace","6231ebbcbe4b2e2fc893aac6","6231ebbcbe4b2e2fc893aacd","6231ebbcbe4b2e2fc893aac7","6231ebbcbe4b2e2fc893aac4","6231ebbcbe4b2e2fc893aac8","6231ebbcbe4b2e2fc893aac9","6234d947be4b2e2fc893b35c","6242fafc20c4e50f94925a0f","6231ebbcbe4b2e2fc893aac3","6231ebbcbe4b2e2fc893aacc"]},
            ]; 
                         
widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "")

When the dashboard loads, it defaults to the FINANCIAL tab due to the last line in the Parent code. Although the child tabber successfully appears when the CASELOAD tab is activated, it does not default to the PDPM selection as desired.

When I update the last line of code in the child tabber to activate the PDPM tab on load, it loads the PDPM widgets on all 5 parent tabs.

widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "PDPM")

 Does that make sense? Let me know if I can provide you with any additional clarification! 

Thanks so much,

Carter

[sathishkumar_a]

Hi, 

Were you able to achieve this ? If so could you please share how you did it