Forum Discussion

cartercjb's avatar
cartercjb
ETL
02-21-2022
Solved

DEFAULT TABBER SELECTION

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 w...
Blox
Code-first Analytics
Dashboards & Reporting
  • harikm007's avatar
    harikm007
    02-22-2022

    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's avatar
    harikm007
    03-18-2022

    cartercjb Please check this : 

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

    -Hari

harikm007's avatar
harikm007
Data Warehouse
02-21-2022

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's avatar
    cartercjb
    ETL
    02-21-2022

    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's avatar
    cartercjb
    ETL
    02-22-2022

    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's avatar
      harikm007
      Data Warehouse
      02-22-2022

      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's avatar
        cartercjb
        ETL
        03-18-2022

        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?