top of page

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



436 views1 comment

1 komentář

Hodnoceno 0 z 5 hvězdiček.
Zatím žádné hodnocení

Přidejte hodnocení
i2i Education
i2i Education
29. 3. 2023

Hello, is there an easy way to make this a multi-select? Thank you!

To se mi líbí
BI Next Level white logo

BI Next Level is your trusted resource for BI customization, data solutions, and expert insights. Explore practical tips, scripts, and tutorials for tools like Sisense, Python, and SQL. Let’s transform your data into impactful insights together.

Quick Links
Connect with us
Copyright © 2024. All Rights Reserved. Designed, Developed & Maintained  by Intertoons
bottom of page