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