Blox drop-down v2 - Without 'Apply' button

We know its possible to create a dropdown using blox. But it requires a button to apply the filter to dashboard. Here is a solution to create blox dropdown without a button. Filter will get applied as soon as the user selects an item from dropdown.

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"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

3. Add below widget script. This is to add 'All' in dropdown and apply filter as son as user picks an item

widget.on('processresult', function(se, ev){
	allObject = [{
					"Panel": "Region",
					"Value": "All",
					"Text": "All",
					"HasValue": true
				}]
	
	ev.result.unshift(allObject)
})

widget.on('ready', function(se, ev){
	
	var filterName = 'Region'
	
	var select = document.getElementById(`data.filters[0].filterJaql.members[0]`);
	
	dashboardFilter = prism.activeDashboard.filters.$$items.find(el => el.jaql.title == filterName)
	
	if(dashboardFilter && dashboardFilter.jaql.filter && dashboardFilter.jaql.filter.members)
	{
		select.value = dashboardFilter.jaql.filter.members[0]
	
	}
	
	select.addEventListener("change", function(e){ 

		if(e.target.value == "All")
		{
			filter = {
				"explicit": false,
				"multiSelection": true,
				"all": true
			}
		}else
		{
			filter = {
				"explicit": true,
				"multiSelection": true,
				"members": [
					e.target.value
				]
			}
		}

		dashboardFilter = prism.activeDashboard.filters.$$items.find(el => el.jaql.title == filterName)

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

})