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

 

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

8 Replies

Replies have been turned off for this discussion
  • 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

         

  • antoniooce7's avatar
    antoniooce7
    Data Storage
    06-12-2023

    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.