This article will take you step by step on how to create a multi-select dropdown filter using blox and JavaScript
Elasticube:
1. Please add a custom column to the "Category" table:
- Add the below string in order to create the column -
'<li><input type="checkbox" />'+[Category].[Category]+'</li>'
2. Perform Build Changes only
Dashboard:
1. Please import the dash file attached. (MultiselectBloX.dash)
2. Please create a custom action in BloX:
- Name the action: MultiBox Filter
- add the below code:
$('blox input:checked').parent().each(function(){
var values = $('.fillmeup').attr('value') + $(this).text();
$('.fillmeup').attr('value', values);
})
var outputFilters = payload.data.data.split(",");
prism.activeDashboard.filters.update(
{
'jaql':{
'dim':'[Category.Category]',
'title':'category',
'filter':{'members':outputFilters},
'datatype':'text'
}
}, {'save':true, 'refresh':true}
)
- Click Next and add the below:
{
"type": "MultiBox Filter",
"title": "select all"
}
- click Create
In case you didn't download the dashboard file please continue:
3. Please upload The json template file: (.JSON File)
- click Apply.
4. Please add the below script to the widget script:
widget.on('ready', function(){
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
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
})
});
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.