DEFAULT TABBER SELECTION

[cartercjb]

I have the following tabber created:

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 : []},	
            ]; 
                        
                        
                        
                        
                        
              

[harikm007 · Accepted solution]

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

@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

[cartercjb]

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]

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

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 · Accepted solution]

@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

[cartercjb]

@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 · Accepted solution]

@cartercjb Please check this : 

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

-Hari

[cartercjb]

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.

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 how to achieve this?

Thanks!

-Carter

[antoniooce7]

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.