Filter widgets (show/hide)

[Tet]

I would like to implement a filter on the dashboard that enables users to filter widgets. How can I achieve this using JavaScript without relying on plugins?

For example: Filter Name: Widget Filter Filter Values: A, B, C Widgets: A', B', C'

When the value "A" is selected, only widget "A'" should be displayed, while hiding the rest of the widgets.

[rapidbisupport]

Hi @Tet ,

I think this dashboard script should do what you want. As a note, you will need the tabber plugin enabled on Sisense for this to work.

Just set your related filterDim and define your widgetHideRules and then your selected filter members will show the related widgetids.

let targetFilterDim = "[DimCountries.Region]"
const widgetHideRules = [
		{
			hideWidgetId: '65bb2c34874ecd0042b01eda',
			filterVal:  "USA"
		},
		{
			hideWidgetId: '65bb2c37874ecd0042b01edc',
			filterVal: "Europe"
		},
		{
			hideWidgetId: '65bb2c31874ecd0042b01ed8',
			filterVal:  "N\\A"
		}
	]

function hideWidget(hideWidgetIds) {
	let showWidgets = prism.activeDashboard.widgets.$$widgets.map((w) => { return w.oid }).filter((w) => { return !hideWidgetIds.includes(w) })
	prism.$ngscope.$broadcast('tab-change', {
			show: hideWidgetIds || [],
			hide: showWidgets || [],
			tabsConfig: 'multiply',
			renderWidgets: false
	})
}

dashboard.on('filterschanged', (dashboard, args) => {
	const hideRulesLength = widgetHideRules.length
	const filter = args.items.filter((i) => { return i.jaql.dim === targetFilterDim })
	if (filter.length === 0) { hideWidget([]); return }
	if (filter[0].jaql.filter.all) { hideWidget(dashboard.widgets.$$widgets.map((w) => { return w.oid })); return }
	let hideWidgetIds = []
    for (let i = 0; i < hideRulesLength; i++) {
        const hideRule = widgetHideRules[i]
        if (filter[0].jaql.filter.members.includes(hideRule.filterVal)) { hideWidgetIds.push(hideRule.hideWidgetId) }
    }
	hideWidget(hideWidgetIds)
})

dashboard.on('domready', () => {
	const hideRulesLength = widgetHideRules.length
	const filter = dashboard.filters.$$items.filter((i) => { return i.jaql.dim === targetFilterDim })
	if (filter.length === 0) { hideWidget(); return }
	if (filter[0].jaql.filter.all) { hideWidget(dashboard.widgets.$$widgets.map((w) => { return w.oid })); return }
	let hideWidgetIds = []
    for (let i = 0; i < hideRulesLength; i++) {
        const hideRule = widgetHideRules[i]
        if (filter[0].jaql.filter.members.includes(hideRule.filterVal)) { hideWidgetIds.push(hideRule.hideWidgetId) }
    }
	hideWidget(hideWidgetIds)
})

 Let me know how you go?

Thanks,

Daniel

RAPID BI

[email protected]

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

[DRay]

Hello @Tet ,

Did the solution offered by @rapidbisupport work for you? If so, please click the 'Accept as Solution' button so that other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

Thank you.