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
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
