cancel
Showing results for 
Search instead for 
Did you mean: 

Default Selections - Multiple Tabbers

cartercjb
10 - ETL
10 - ETL

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.

cartercjb_0-1649096129917.png

 

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. 

cartercjb_1-1649096129676.png

Any ideas on how to achieve this?

Thanks!

-Carter

2 REPLIES 2

Patrykked
7 - Data Storage
7 - Data Storage

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

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.

cartercjb_0-1649737425598.png

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