Blox drop-down with 'All' selection

Here is a solution to create dropdown filter using blox which contains an additional 'All' element to filter all item in the column.

Steps:

1. Create new Blox widget and add a dimension under 'items' panel. Add same dimension as a dashboard filter.

2. Add below Blox script. Replace the name 'Region' in below script with the name of dimension you added in the above step.

{
    "style": "select {border-radius:5px}",
    "script": "",
    "title": "",
    "titleStyle": [
        {
            "display": true
        }
    ],
    "showCarousel": true,
    "carouselAnimation": {
        "showButtons": false
    },
    "body": [
        {
            "type": "Container"
        },
        {
            "type": "ColumnSet",
            "separator": false,
            "spacing": "default",
            "columns": [
                {
                    "type": "Column",
                    "spacing": "none",
                    "width": "250px",
                    "items": [
                        {
                            "type": "Container",
                            "spacing": "none",
                            "width": "220px",
                            "height": "50px",
                            "style": {
                                "color": "black",
                                "padding-top": "10px",
                                "margin-left": "10px",
                                "backgroundColor": "white"
                            },
                            "items": [
                                {
                                    "type": "Input.ChoiceSet",
                                    "id": "data.filters[0].filterJaql.members[0]",
                                    "class": "dropdownChoices",
                                    "value": "Reseller",
                                    "displayType": "compact",
                                    "choices": "{choices:Region}",
                                    "style": {
                                        "color": "#656566",
                                        "padding-left": "10px",
                                        "margin-left": "10px",
                                        "backgroundColor": "grey",
                                        "border": "2px solid #aac7e6",
                                        "height": "35px",
                                        "font-size": "15px"
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "spacing": "none",
                    "width": "175px",
                    "items": [
                        {
                            "type": "Container",
                            "spacing": "none",
                            "width": "80px",
                            "items": [
                                {
                                    "type": "ActionSet",
                                    "margin": "0px",
                                    "padding": "0px",
                                    "actions": [
                                        {
                                            "type": "dropdownFilter",
                                            "title": "Apply",
                                            "style": {
                                                "color": "#ffffff",
                                                "padding-left": "15px",
                                                "margin-top": "10px",
                                                "background-color": "#177be6",
                                                "border": "1px solid #cccdcf",
                                                "font-weight": "bold",
                                                "border-radius": "15px"
                                            },
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Region",
                                                        "filterJaql": {
                                                            "explicit": false,
                                                            "members": [
                                                                ""
                                                            ]
                                                        }
                                                    }
                                                ]
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

3. Add below widget script. This is to add 'All' in dropdown.

widget.on('processresult', function(se, ev){
	allObject = [{
					"Panel": "Region", //replace region with name of item panel added in step 1
					"Value": "All",
					"Text": "All",
					"HasValue": true
				}]
	
	ev.result.unshift(allObject)
})

4. Create a custom action 'dropdownFilter' using below script.

if(payload.data.filters[0].filterJaql.members[0] == "All")
{
    filter = {
        "explicit": false,
        "multiSelection": true,
        "all": true
    }
}else
{
    filter = {
        "explicit": true,
        "multiSelection": true,
        "members": [
            payload.data.filters[0].filterJaql.members[0]
        ]
    }
}

dashboardFilter = prism.activeDashboard.filters.$$items.find(el => el.jaql.title == payload.data.filters[0].filterName)

var filterOptions = {
    save: true,
    refresh: true,
}
dashboardFilter.jaql.filter = filter
prism.activeDashboard.filters.update(dashboardFilter, filterOptions)