Blox - Multi-Select Dropdown List Filter

[kh-swathi]

Blox - Multi-Select Dropdown List Filter

This article will take you step by step on how to create a multi-select dropdown filter using Blox and JavaScript.

 

ElastiCube:

1. For each field you want to use in multi-select filter, you need to add a custom column.

For instance, in our Sample ECommerce ElastiCube, add a custom column to the "Category" table:

• For Sisense on Windows add the below string in order to create the column:

'<li><input type="checkbox" />'+[Category].[Category]+'</li>'

• For Sisense on Linux:

'<li><input type=checkbox>'+[Category].[Category] + '</li>'

2. Change its name to [CategoryHTML].

3. Do the same for the column [Country] from the table [Country] and name it [CountryHTML].

3. Perform the 'Changes Only' build.

Dashboard:

1. Download the dashboard attached and import it to your application.

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
    }
)

4. Action's snippet:

{
    "type": "MultiBoxSelection",
    "title": "Apply",
    "data": {
        "dim": "FilterDimension",
        "title": "FilterTitle"
    }
}

5. 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.

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you "as-is" and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.