Showing results for 
Search instead for 
Did you mean: 
Community Team Member
Community Team Member
This article will take you step by step on how to create a multi-select dropdown filter using blox and JavaScript
1. For each field you want to use in multi-select filter, you need to add a custom column.
For our sample, add a custom column to the "Category" table:
  • Add the below string in order to create the column (for Sisense on Windows):
'<li><input type="checkbox" />'+[Category].[Category]+'</li>'
  • For Sisense on Linux:
'<li><input type=checkbox>'+[Category].[Category] + '</li>'
2. Changes its name to [CategoryHTML]
3. Do the same for the column [Country] from the table [Country] and name it [CountryHTML]
3. Perform Build Changes only
1. Download MultiSelect.dash and import it to your system
2.  Create a custom action in BloX and name it MultiBoxSelection:
3. Add the action's code below:
var outputFilters = [];
var widgetid = payload.widget.oid;
var widgetElement = $('[widgetid="' + widgetid + '"]');

widgetElement.find($('blox input:checked')).parent().each(function () {
    var values = $('.fillmeup').attr('value') + $(this).text();
    $('.fillmeup').attr('value', values);
}).each((i, lmnt) => {

        'jaql': {
            'filter': {
                'members': outputFilters
            'datatype': 'text'
        'save': true,
        'refresh': true
Action's snippet:

    "type": "MultiBoxSelection",
    "title": "Apply",
    "data": {
        "dim": "FilterDimension",
        "title": "FilterTitle"
4. Add the widget's script. For each widget you need to change identifiers [CategoryList] and [CategoryItems] - these identifiers should be unique per each widget on a page:
widget.on('ready', function() {
    var checkList = document.getElementById('CategoryList');
    var items = document.getElementById('CategoryItems');
    checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
        if (items.classList.contains('visible')) {
   = "none";
        } else {
   = "block";
    items.onblur = function(evt) {

widget.on('processresult', function(a, b) {
    b.result.slice(1, b.result.length).forEach(function(i) {
        b.result[0][0].Text = b.result[0][0].Text + ' ' + i[0].Text
These identifiers should be the same as you have in the widget in the value of [text]:
    "type": "TextBlock",
    "spacing": "large",
    "id": "",
    "class": "",
    "text": "<div id='CategoryList' class='dropdown-check-list' tabindex='100'> <span class='anchor'>Select Category</span> <ul id='CategoryItems' class='items'>{panel:CategoryHTML}</ul> </div>"
5. Click Apply on the widget and refresh the dashboard.

Important Notes:
  1. Make sure you have the Category in the items (The new column was created) and name the Item "Category".
  2. Make sure you have a Category Filter (The actual category field and name it "Category") on the dashboard level.
  3. Make sure to replace the field and table names with the relevant field/table in the Action, in the editor of the Blox widget in the Blox items and in the dashboard filter.
Version history
Last update:
‎03-02-2023 09:52 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?