Forum Discussion

cartercjb's avatar
cartercjb
ETL
03-15-2022

REFERENCING WIDGETID AS VARIABLE IN TABBER

Can anyone recommend the best-practice approach for defining each widget ID as its own variable so that I can reference the names in this script instead? I'm having a difficult time keeping each tab accurately updated.  

This is what I have currently configured as a Tabber action:

 const value = payload.title;

// This is the css selector for each widget
// widget[widgetid="{your widget id}"]
//const _id = 'widget[widgetid=]'
const H1_id = 'widget[widgetid="620347e5b8defd34f012d25e"]'
const H2_id = 'widget[widgetid="621e7b388133b3087c4fc496"]'
const TPMHRS_id = 'widget[widgetid="621ec6558133b3087c4fc4c3"]'
const CPT_id = 'widget[widgetid="621e60febe4b2e2fc8936f18"]'

const GRCO_id = 'widget[widgetid="621e79a18133b3087c4fc457"]'
const DISCSP_id = 'widget[widgetid="61fc1ef0b8defd34f012bae8"]'
const PTTXDATES_id = 'widget[widgetid="620368da902bfa28e00694bb"]'
const SITEFILTER_id = 'widget[widgetid="621ef3418133b3087c4fc565"]'
const PDPMSTAYS_id = 'widget[widgetid="621ef4128133b3087c4fc56b"]'
const SNFMEDB_id = 'widget[widgetid="621ff2adbe4b2e2fc89373fc"]'
const TXFX_id = 'widget[widgetid="621f2cfe8133b3087c4fc66a"]'
const TXFXPT_id = 'widget[widgetid="621f34298133b3087c4fc69e"]'
const Pivot_id = 'widget[widgetid="621f30998133b3087c4fc685"]'
const TitleNSK_id = 'widget[widgetid="621fe60ebe4b2e2fc89373a6"]'

if (value == 'HOME') {
    $(H1_id).show()
    $(H2_id).show()
    $(TPMHRS_id).show()
    $(CPT_id).hide()
    $(GRCO_id).hide()
    $(DISCSP_id).hide()
    $(PTTXDATES_id).hide()
    $(SITEFILTER_id).hide()
    $(PDPMSTAYS_id).hide()
    $(SNFMEDB_id).hide()
    $(TXFX_id).hide()
    $(TXFXPT_id).hide()
    $(Pivot_id).hide()
    $(TitleNSK_id).hide()
    

} else if (value == 'Category') {
    $(H1_id).hide()
    $(H2_id).hide()
    $(TPMHRS_id).hide() 
    $(CPT_id).show()
    $(GRCO_id).show()
    $(DISCSP_id).show()
    $(PTTXDATES_id).show()
    $(SITEFILTER_id).show()
    $(PDPMSTAYS_id).show()
    $(SNFMEDB_id).show()
    $(TXFX_id).show()
    $(TXFXPT_id).show()
    $(Pivot_id).show()  
    $(TitleNSK_id).show()
} else {
    $(H1_id).hide()
    $(H2_id).hide()
    $(TPMHRS_id).hide()
    $(CPT_id).hide()
    $(GRCO_id).hide()
    $(DISCSP_id).hide()
    $(PTTXDATES_id).hide()
    $(SITEFILTER_id).hide()
    $(PDPMSTAYS_id).hide()
    $(SNFMEDB_id).hide()
    $(TXFX_id).hide()
    $(TXFXPT_id).hide()
    $(Pivot_id).hide()
    $(TitleNSK_id).hide()
}

I also have this dashboard script which is supposed to correctly load as if the HOME  button was selected by default:

/*
Welcome to your Dashboard's Script.

To learn how you can access the Widget and Dashboard objects, see the online documentation at https://developer.sisense.com/pages/viewpage.action?pageId=557127
*/ 




dashboard.on('domready',function(d) {
	
	const H1_id = 'widget[widgetid="620347e5b8defd34f012d25e"]'
	const H2_id = 'widget[widgetid="621e7b388133b3087c4fc496"]'
	const TPMHRS_id = 'widget[widgetid="621ec6558133b3087c4fc4c3"]'
	const CPT_id = 'widget[widgetid="621e60febe4b2e2fc8936f18"]'

	const GRCO_id = 'widget[widgetid="621e79a18133b3087c4fc457"]'
	const DISCSP_id = 'widget[widgetid="61fc1ef0b8defd34f012bae8"]'
	const PTTXDATES_id = 'widget[widgetid="620368da902bfa28e00694bb"]'
	const SITEFILTER_id = 'widget[widgetid="621ef3418133b3087c4fc565"]'
	const PDPMSTAYS_id = 'widget[widgetid="621ef4128133b3087c4fc56b"]'
	const SNFMEDB_id = 'widget[widgetid="621ff2adbe4b2e2fc89373fc"]'
	const TXFX_id = 'widget[widgetid="621f2cfe8133b3087c4fc66a"]'
	const TXFXPT_id = 'widget[widgetid="621f34298133b3087c4fc69e"]'
	const Pivot_id = 'widget[widgetid="621f30998133b3087c4fc685"]'
	const TitleNSK_id = 'widget[widgetid="621fe60ebe4b2e2fc89373a6"]'


	$(H1_id).show()
    $(H2_id).show()
    $(TPMHRS_id).show()
    $(CPT_id).hide()
    $(GRCO_id).hide()
    $(DISCSP_id).hide()
    $(PTTXDATES_id).hide()
    $(SITEFILTER_id).hide()
    $(PDPMSTAYS_id).hide()
    $(SNFMEDB_id).hide()
    $(TXFX_id).hide()
    $(TXFXPT_id).hide()
    $(Pivot_id).hide()
	$(TitleNSK_id).hide()
})

However, when the dashboard loads it does not load correctly. It slowly removes the hidden widgets. See here for an example:

 Any suggestions on how to correctly load the dashboard as if the first button is selected?

Thanks!

 

Blox
Code-first Analytics
dashboards & reporting

1 Reply

Replies have been turned off for this discussion
  • rafaelderas's avatar
    rafaelderas
    Cloud Apps
    10-03-2023

    I usually define widgets in a const list and then reference those names in the tabber definition so that I list widgets only once. Maybe an approach lilke this could help you have a better control of widget groups

     

     

    const ysrsummary = ["642b1eb0ae773500332b8604","642b1eb0ae773500332b8603","642b1eb0ae773500332b8601","642b1eb0ae773500332b860a","642b1eb0ae773500332b860b"]
const golfsummary = ["64a73e8003b89e0033b681f7","64a73e9f03b89e0033b681f9","64a73ef7c6f56c00339a4ef4","64a73f2303b89e0033b681fe","64a73f4fc6f56c00339a4efa"]

const se = ["642b1eb0ae773500332b85cd","642b1eb0ae773500332b85ce","633c870a6263580036d1b601","633c87146263580036d1b603","642b1eb0ae773500332b85cf","642b1eb0ae773500332b85d0",
			"642b1eb0ae773500332b85d1","642b1eb0ae773500332b85d2","642b1eb0ae773500332b85d3","642b1eb0ae773500332b85d4","642b1eb0ae773500332b85d5","642b1eb0ae773500332b85d6",
			"642b1eb0ae773500332b85d7","642b1eb0ae773500332b85d8","642b1eb0ae773500332b8605","642b1eb0ae773500332b8606"]
const tm = ["642b1eb0ae773500332b85d9","642b1eb0ae773500332b85da","642b1eb0ae773500332b85db","642b1eb0ae773500332b85dc","642b1eb0ae773500332b85dd","642b1eb0ae773500332b85de",
			"642b1eb0ae773500332b85df","642b1eb0ae773500332b85e5","642b1eb0ae773500332b85e2","642b1eb0ae773500332b85e0","642b1eb0ae773500332b85e1","642b1eb0ae773500332b85e3",
		    "642b1eb0ae773500332b85e4","63e6a0e8f7761b00341b6f2a","642b1eb0ae773500332b8607"]
const gm = ["642b1eb0ae773500332b85e6","642b1eb0ae773500332b85e7","642b1eb0ae773500332b85e8","642b1eb0ae773500332b85e9","642b1eb0ae773500332b85ea","642b1eb0ae773500332b85eb",
			"642b1eb0ae773500332b85ec","642b1eb0ae773500332b85ed","642b1eb0ae773500332b85ee","642b1eb0ae773500332b85ef","642b1eb0ae773500332b85f0","642b1eb0ae773500332b85f1",
			"642b1eb0ae773500332b85f2","63e6a0ed6cc3550034f428c8","642b1eb0ae773500332b8608"]
const od = ["642b1eb0ae773500332b85f3","642b1eb0ae773500332b85f4","642b1eb0ae773500332b85f5","642b1eb0ae773500332b85f6","642b1eb0ae773500332b85f8","642b1eb0ae773500332b85f7",
			"642b1eb0ae773500332b85f9","642b1eb0ae773500332b85fa","642b1eb0ae773500332b85fb","642b1eb0ae773500332b85fc","642b1eb0ae773500332b85fd","642b1eb0ae773500332b85fe",
			"642b1eb0ae773500332b85ff","63e6a0f0f7761b00341b6f2c","642b1eb0ae773500332b8609"]
const detail = ["64c7ec5703b89e0033b68d98"]
const colheaders = ["642b1eb0ae773500332b85cb","642b1eb0ae773500332b85cc"]

const golf = ["64a2e6ad03b89e0033b67cb8","64a2e6b4c6f56c00339a4e0b","64a2e6c8c6f56c00339a4e0d","64a2e6cdc6f56c00339a4e0f","64a2e6e603b89e0033b67cba","64a2e6ed03b89e0033b67cbc",
			  "64a2e74203b89e0033b67cbf","64a2e747c6f56c00339a4e12"]

const golfdetail = ["64c7ec5703b89e0033b68d98"]

const ysrtabber = ["64a72d44c6f56c00339a4edd"]
const golftabber = ["64a72d56c6f56c00339a4edf"]


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*/
			});


widget.tabs = [{title: "Golf Summary", displayWidgetIds : golftabber.concat(golfsummary),
			hideWidgetIds : ysrtabber.concat(ysrsummary,se,tm,gm,od,detail,colheaders,golf)},
			{title: "Ratings", displayWidgetIds : golftabber.concat(golf,colheaders),
			hideWidgetIds : ysrtabber.concat(ysrsummary,se,tm,gm,od,golfsummary,detail)}			   
		];