Blox Dropdown Placeholder

[intapiuser]

By default, BloX will use the first element in your dropdown as the default text in the dropdown box.

Instead of this value, this method adds a different default non-selectable value.

Steps For Implementation

1. Add the addPlaceholder class to your Input.ChoiceSet
   
2. Add the following script to the script of your BloX widget

$('.addPlaceholder').prepend('<option value=\"\" disabled selected>Select Filter</option>')

You can update the text "Select Filter" in the script above to customize the placeholder text.

[taras]

To extend the above logic for the dropdown to dynamically display the actual Filter value, the following script improvement can be used:

widget.on('ready',(w, args)=>{
	var tempFilter = 'All Items';
	if (prism.activeDashboard.filters.$$items[0].jaql.filter.members) tempFilter = prism.activeDashboard.filters.$$items[0].jaql.filter.members.toString();
	$('.addPlaceholder').prepend('<option value=\"\" disabled selected>'+tempFilter+'</option>');
});

The above takes the first dashboard filter values and puts them as the first item on a drop-down list. Otherwise, "All Items" is displayed.

Tested on Sisense Version: L2023.11.0.279.

[duc_resolvevn]

Thanks @taras I tried your code and it "worked" but

1: It add new 'All items' into list until it equal number of value in list. For example my list have 3 value, it will show like this.

2: How to make it show All Items when dashboard open and when click 'Clear' filter Action

Thanks

[taras]

Hi @duc_resolvevn , looks like you use the same script/class three times. Try utilizing a unique class when implementing the script multiple times for different widgets on the same dashboard. In BloX editor:

"class": "addPlaceholder1" //for BloX widget 1
"class": "addPlaceholder2" //for BloX widget 2
//etc..

In the Script editor for the widget, use the tempFilter and selector according to your needs:

///for the first widget replace the following rows in the widget script///
	var tempFilter = 'First Filter';
///***///
	$('.addPlaceholder1').prepend('<option value=\"\" disabled selected>'+tempFilter+'</option>');

///for the second widget they will be different:///
	var tempFilter = 'Second Filter';
///***///
	$('.addPlaceholder2').prepend('<option value=\"\" disabled selected>'+tempFilter+'</option>');

If the filter is deleted/cleared, the dashboard contains no filters but you want to display the default value, the previous script can be modified as follows:

widget.on('ready', (w, args) => {
    var tempFilter = 'All Items';

    // Check if there are any items in $$items
    if (window.prism.activeDashboard.filters.$$items.length > 0) {
        // Check if the first item has filter members
        if (window.prism.activeDashboard.filters.$$items[0].jaql.filter.members) {
            tempFilter = window.prism.activeDashboard.filters.$$items[0].jaql.filter.members.toString();
        }
    } 

    // Prepend the option with the tempFilter value
    $('.addPlaceholder').prepend('<option value="" disabled selected>' + tempFilter + '</option>');
});

Let me know if it works better for you!

[duc_resolvevn]

Tks @taras, problem with multiple solved, but your script for clear action does not work, I think because it work only when we load widget, I need it work when I click 'Clear' button also. 

[taras]

Hi @duc_resolvevn , thanks for the update.

I verified the latest script I provided, and it works as expected when I manually or programmatically reset the filter (Sisense Version: L2025.1.0.179).

You can compare your Clear button logic with the following Reset Filters implementation to see if it works better for you: https://community.sisense.com/t5/knowledge-base/reset-to-default-filters-button-using-blox/ta-p/786

If the issue still persists, feel free to raise a support ticket so we can investigate it further.

[duc_resolvevn]

Tks @taras , I created custom Action as you suggest in your link and it work, I solved Clear button problem.

Have a nice weekends!