cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
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
MultiSelect_DropdownList.gif
Elasticube:
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:
table.png
  • 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>'
mceclip0.png
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
Dashboard:
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) => {
    outputFilters.push($(lmnt).text());
})

payload.widget.dashboard.filters.update(
    {
        'jaql': {
            'dim': payload.data.dim,
            'title': payload.data.title,
            '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')) {
            items.classList.remove('visible');
            items.style.display = "none";
        } else {
            items.classList.add('visible');
            items.style.display = "block";
        }
    }
    items.onblur = function(evt) {
        items.classList.remove('visible');
    }
});

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:
Contributors
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?

Email community@sisense.com