Blox Filter Buttons

Here is a blox template and script to create filter buttons, where each buttons represent items in a table column. These buttons are created dynamically and no need to create separate buttons manually.

Steps:

1. Create a blox with below Blox Script. Add only one dimension/field under Items panel (in below screenshot, Region is the dimension). Add same field as a dashboard filter.

In below blox script:

"item": "{panel:Region}" -

Replace '{panel:Region}' with name of panel you added in blox

"dim": "[Records.Region]" -

Replace '[Records.Region]' with dimension name (here Records is table name and Region is column name)

"title": "Region" -

Replace 'Region' with title of dashboard filter

{
    "style": ".scroll .content div{display:inline-block}",
    "script": "",
    "title": "",
    "titleStyle": [
        {}
    ],
    "carouselAnimation": {},
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Container",
                    "spacing": "none",
                    "items": [
                        {
                            "type": "ActionSet",
                            "margin": "0px",
                            "padding": "0px",
                            "actions": [
                                {
                                    "type": "Add Filter",
                                    "style": {
                                        "color": "rgb(9, 130, 13)",
                                        "font-weight": "600",
                                        "border": "1px solid rgba(9, 130, 13, 0.3)",
                                        "border-radius": "25px"
                                    },
                                    "title": "{panel:Region}",
                                    "data": {
                                        "filters": {
                                            "item": "{panel:Region}",
                                            "dim": "[Records.Region]",
                                            "title": "Region"
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

2. Create a custom action 'Add Filter' with below script.

(Here is a guide on how to create custom action in Blox: https://support.sisense.com/kb/en/article/sisense-blox-custom-actions-guide)

const filters = payload.data.filters.item
const filter_arr = filters.split('\n')

console.log(payload)

prism.activeDashboard.filters.update(
    {
        'jaql':{
            'dim': payload.data.filters.dim,
            'title': payload.data.filters.title,
            'filter':{
                'members':[filter_arr[0]]
            },
            'datatype':'text'
        }
    },{'save':true, 'refresh':true}

)

$(payload.container).find('button.btn').css({
    'background-color': '#ffffff'
});

$(payload.container).find('button.btn:contains(' + filter_arr[0] + ')').css({
    'background-color': 'rgba(9, 130, 13, 0.15)'
});

3. Add below script as Blox widget script (in script editor window)

Here, replace 'Region' with name of dashboard filter

widget.on('ready',function(widget, args){

  var dashboardFilters = widget.dashboard.filters.$$items;
  var textOfButtonToFormat = dashboardFilters.filter(i=>i.jaql.title == 'Region')[0].jaql.filter.members[0]; 

	$('button.btn', element).css({
		'background-color': '#ffffff'
	});

	$('button.btn:contains(' + textOfButtonToFormat + ')', element).css({
		'background-color': 'rgba(9, 130, 13, 0.15)'
	});

})

4. Save the scripts and refresh dashboard