Blox - Multi-Select Dropdown List Filter | Blox

Knowledge Base Docs

Blox

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:

Make sure you have the Category in the items (The new column was created) and name the Item "Category".
Make sure you have a Category Filter (The actual category field and name it "Category") on the dashboard level.
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.

Liliia Kislitsyna

Posted 1 year ago·Last reply 1 year ago

3 comments

Rafael Ferreira

·1 year ago

Hi Everyone,

Whoever is trying to attempt this BloX Multi-select option, do not import that data provided by Liliia_DevX, we have determined that the metadata carries over, so you must create the dashboard from scratch.

The BloX editor script:

{
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "style": "",
    "script": "$('.c011 .action-set .action button').eq(0).mouseup(function(){ console.log('fire'); $('blox input:checked').parent().each(function(){ var values = $('.fillmeup').attr('value') + ',' + $(this).text(); $('.fillmeup').attr('value', values); }) })",
    "body": [
        {
            "type": "ColumnSet",
            "style": {},
            "columns": [
                {
                    "type": "Column",
                    "spacing": "extraLarge",
                    "width": "225px",
                    "items": [
                        {
                            "type": "Container",
                            "style": {
                                "justify-items": "center",
                                "align-items": "center"
                            },
                            "items": [
                                {
                                    "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>"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "100px",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "MultiBoxSelection",
                                    "title": "Apply",
                                    "data": {
                                        "dim": "[Category.Category]",
                                        "title": "Category"
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "100px",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Filters",
                                    "title": "Clear Filter",
                                    "data": {
                                        "filters": [
                                            {
                                                "filterName": "Category",
                                                "filterJaql": {
                                                    "explicit": false,
                                                    "multiSelection": true,
                                                    "all": true
                                                }
                                            }
                                        ]
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "Input.Text",
            "id": "data",
            "class": "fillmeup",
            "title": "New Input",
            "placeholder": "Placeholder",
            "style": {
                "display": "none"
            }
        },
        {
            "type": "TextBlock",
            "id": "",
            "class": "",
            "text": "<style>.dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ''; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; }</style>"
        }
    ],
    "actions": []
}

Then you can add the Action button to your env., the dashboard script, and then it should work.

Liliia Kislitsyna

AdminOP1 year ago

Astroraf hi,

Thanks for sharing your feedback. I recommend you to raise a Support ticket with the following details:

1. Sisense version and platform.

2. Exported ElastiCube with the data and dashboard as a dash file.

3. HAR file with the content recorded replicating the issue.

We'll be happy to review the issue together to understand why the error is occurring.

Thanks, Lily

Rafael Ferreira

·1 year ago

Liliia_DevX

Thank you for providing this template. I have tried to recreate this on my side but I am getting an error on the BloX side. I have duplicated the model and added the custom columns along with all the steps provided but still getting an error. Below is the error I am getting. Do you have a solution to this?