Knowledge Base Article

Blox Dropdown Placeholder

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.
Updated 02-26-2025

6 Comments

  • taras's avatar
    taras
    Sisense Employee

    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.

  • 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's avatar
    taras
    Sisense Employee

    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!

  • 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's avatar
    taras
    Sisense Employee

    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.

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

    Have a nice weekends!