cancel
Showing results for 
Search instead for 
Did you mean: 

DEFAULT TABBER SELECTION

cartercjb
10 - ETL
10 - ETL

I have the following tabber created:

cartercjb_0-1645463305749.png

Is there a way to dynamically set the default selection so that when the dashboard opens, it opens to the correct day? So if I were to open it today,  it would select Monday. If I were to open this on a Wednesday, it would select Wednesday.

widget.tabs =  [
	{title: "MONDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "TUESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "WEDNESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "THURSDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "FRIDAY", displayWidgetIds : [],hideWidgetIds : []},	
            ]; 
                        
                        
                        
                        
                        
              

 

2 ACCEPTED SOLUTIONS

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb ,

Hope this script works. Moved the script outside of 'render' event. Also added script to make a widget appear based on the day (update variable 'widgetid' for it)

widget.on('render',function(w, e){e.prefixText = '';
			e.suffixText = '';
			e.selectedColor = '#86b817'; /*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*/
});


//your existing code
widget.tabs =  [
	{title: "MONDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "TUESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "WEDNESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "THURSDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "FRIDAY", displayWidgetIds : [],hideWidgetIds : []},

//New code
widgetid = '89f3b99a34c78652er3eweb' //id of widget that need to appear based on day	
	
var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
var d = new Date();
var dayName = days[d.getDay()];

$.each(widget.tabs, function(index, value){
	if(value.title == dayName)
		value.hideWidgetIds.push(widgetid)
	else
		value.displayWidgetIds.push(widgetid)
})

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

-Hari

 

View solution in original post

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb Please check this : 

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

-Hari

View solution in original post

8 REPLIES 8

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb ,

Please try this widget script:

widget.on('render',function(w, e) {

	var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
	var d = new Date();
	var dayName = days[d.getDay()];

	e.widget.style.activeTab = e.widget.tabs.findIndex(el=>el.title == dayName)
	
});

-Hari

 

That appears to work perfectly. @harikm007  Similarly, is there a script to make a text widget appear based on the day? For example, assume today is MONDAY. If someone selects any day besides Monday (today()), have a text widget appear. Otherwise, hide that widget. 

cartercjb_0-1645482591384.png

@harikm007 Also, I  noticed this morning that although the correct day was highlighted, it technically wasn't selected. This was the view I had this morning. Tuesday was highlighted but the widgets that appear are associated when Monday is selected.

cartercjb_0-1645538589705.png

Once I clicked Tuesday again, the proper widgets appeared. Is there a way to update this script to force a select/click?

Thanks,

Carter

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb ,

Hope this script works. Moved the script outside of 'render' event. Also added script to make a widget appear based on the day (update variable 'widgetid' for it)

widget.on('render',function(w, e){e.prefixText = '';
			e.suffixText = '';
			e.selectedColor = '#86b817'; /*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*/
});


//your existing code
widget.tabs =  [
	{title: "MONDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "TUESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "WEDNESDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "THURSDAY", displayWidgetIds : [],hideWidgetIds : []},
	{title: "FRIDAY", displayWidgetIds : [],hideWidgetIds : []},

//New code
widgetid = '89f3b99a34c78652er3eweb' //id of widget that need to appear based on day	
	
var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
var d = new Date();
var dayName = days[d.getDay()];

$.each(widget.tabs, function(index, value){
	if(value.title == dayName)
		value.hideWidgetIds.push(widgetid)
	else
		value.displayWidgetIds.push(widgetid)
})

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

-Hari

 

@harikm007 How would you update the code for a simpler situation where you always want a specific tab to load? For instance, if I had a tabber title = "PDPM STATS" how would I set that one to load by default? 

 

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb Please check this : 

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

-Hari

Hi @harikm007 !!

I have a more complex follow up question for you. I have been able to use your logic for default selections very easily! Now, I am trying to make two dynamically related tabbers that behave like this:

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

cartercjb_0-1648658221098.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-1648658336582.png

 

Any ideas how to achieve this?

Thanks!

-Carter

 

antoniooce7
7 - Data Storage
7 - Data Storage

Is there a way to readjust the Tabber widget to align the title with the other widget? because It takes a lot of blank space between the other widget title and the Tabber title.