Changing Measures In The Entire Dashboard Using Blox User Interface
Objective
Display several related values (KPIs/Measures) in multiple widgets in the dashboard based on the user selection, in a simple and easy way, without duplicating widgets/formulas or tables in the Elasticube. As a direct result - the queries behind the widgets are extremely faster - lead to shorter loading time when the end-user needs to change the whole dashboard KPIs.
Example files (works with Ecommerce Sample Elasticube):
Demonstration:
Preparation
- Create a new Indicator widget and save its WidgetId.
- Create a custom action with this code below and name it SwitchMeasure
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[1].items[dimIndex].jaql;
var widgetIds = payload.data.widgetToModify;
payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){
if(widget.metadata.panels[1].$$widget.type == 'indicator')
{
widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
}
else
{
widget.metadata.panels[1].items[0].jaql = dimToSwapTo;
}
widget.changesMade();
widget.refresh();
})Implementation
1. ADDING MEASURES TO SWITCH BETWEEN
The formulas in the values panel define the measures your other widgets will switch between.
Create a new Blox widget and add all the formulas (Up to 20 Formulas) you want to switch between into the values panel in the selection of the button Blox widget. Please pay attention to the order (top value to bottom -> left to right buttons)
2. CUSTOMIZING THE BUTTONS SELECTION WIDGET
This step will define the values that are visible to the user in the button selection widget.
-Add choices that reflect the ORDER and intuitive name the formulas in the values panel.
-Add the widget IDs of the widgets you'd like to modify to the script of each option.
You can find the widget ids in the URL when in widget editing mode.
-Change the button color by editing the Background color for each option.
For example, we will be switching between Revenue, Cost, and Quantity, our Blox script would be:
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"titleStyle": [
{
"display": "none"
}
],
"carouselAnimation": {
"delay": 0,
"showButtons": false
},
"body": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": " "
}
],
"actions": [
{
"type": "SwitchMeasure",
"title": "Revenue",
"style": {
"backgroundColor": "#298C1A"
},
"data": {
"widgetToModify": [
"5f1b462e336d9c242cb9e8ea",
"5f1b462e336d9c242cb9e8e5",
"5f1b462e336d9c242cb9e8e7",
"5f1b462e336d9c242cb9e8e9",
"5f1b462e336d9c242cb9e8e8"
],
"selectVal": "1"
}
},
{
"type": "SwitchMeasure",
"title": "Cost",
"style": {
"backgroundColor": "#A31818"
},
"data": {
"widgetToModify": [
"5f1b462e336d9c242cb9e8ea",
"5f1b462e336d9c242cb9e8e5",
"5f1b462e336d9c242cb9e8e7",
"5f1b462e336d9c242cb9e8e9",
"5f1b462e336d9c242cb9e8e8"
],
"selectVal": "2"
}
},
{
"type": "SwitchMeasure",
"title": "Quantity",
"style": {
"backgroundColor": "#708AA5"
},
"data": {
"widgetToModify": [
"5f1b462e336d9c242cb9e8ea",
"5f1b462e336d9c242cb9e8e5",
"5f1b462e336d9c242cb9e8e7",
"5f1b462e336d9c242cb9e8e9",
"5f1b462e336d9c242cb9e8e8"
],
"selectVal": "3"
}
}
]
}
3. CUSTOMIZING THE BUTTON SELECTION ANIMATION
Add the script (widget script) below to the indicator you created in the preparation section:
- Change the WidgetID to your indicator Widget ID
- Change the formula names based on the value list from the buttons selection widget
- Change the button’s titles based on the titles you selected the buttons selection widget
//Widget Script:
var ChooseYourUnselectColor = '#D3D3D3';
var Button1Color = '#298C1A';
var Button2Color = '#A31818';
var Button3Color = '#708AA5';
var widgetIndicator = '5f1b462e336d9c242cb9e8ea'
widget.on('ready',function(widget, args){
var widgetOID = widgetIndicator;
//Get the selected KPI object
var widget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetOID)
if(widget.metadata.panels[0].items[0].jaql.title == 'Total Revenue'){
var textOfButtonToFormat1 = 'Cost';
var textOfButtonToFormat2 = 'Quantity';
var selectedButton = 'Revenue'
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": Button1Color
});
}
else if (widget.metadata.panels[0].items[0].jaql.title == 'Total Cost')
{
var textOfButtonToFormat1 = 'Revenue';
var textOfButtonToFormat2 = 'Quantity';
var selectedButton = 'Cost'
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": Button2Color
});
}
else
{
var textOfButtonToFormat1 = 'Revenue';
var textOfButtonToFormat2 = 'Cost';
var selectedButton = 'Quantity'
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": Button3Color
});
}
})
9 comments
NancySummit
·1 year agoOK will do. Thank you!
DRay
·1 year agoHi NancySummit,
Thank you for reaching out. Can you submit your question in the Help and How-To forum? More people will see it there.
Link to this post or paste your code in the new thread so people can see the code.
Thank you.
NancySummit
·1 year ago@Liliia_DevX intapiuser
I've been trying to modify this to work on a line chart (widget.type == 'lineChart' in the SwitchMeasure action) -- I don't want an indicator widget on the dashboard -- and I just can't get it to work without including an indicator widget. The line chart changes between 3 values perfectly without the indicator widget type but the buttons won't show the designated selected color when I click on them. The only button that shows the selected color is the default 3rd value, the other 2 just stay as the Unselected color. Anyone have some ideas? My javascript is beginner level if that. Thanks for any help!
Rafael Ferreira
·1 year agoIgnore comment - problem was fixed
Liliia Kislitsyna
Admin1 year agoAstroraf please check the following:
1. The script is applied to the Indicator and "var widgetIndicator = '5f1b462e336d9c242cb9e8ea'" is updated accordingly with the widget id.
2. If your values in the Blox widget are titled as "Revenue", "Cost" and "Quantity", please substitute it in the script accordingly. Please refer to the following lines:
3. Make sure the order of values in the Blox widget is exactly the same as you defined in Blox buttons:
Please let me know if that helps!
Best,
Lily
Rafael Ferreira
·1 year agoLiliia_DevX 🙌🙌🙌🙌🙌🙌
Thanks for being awesome, it works like a charm!
But
the buttons do not go grey or the designated color 'ChooseUnselectorColor' when a button is pressed. It should work from what I can read from the code but it's not doing what is designated to do so.
Liliia Kislitsyna
Admin1 year agoAstroraf hi!
Please try to use the following code in the Action "SwitchMeasure" and let me know if that woks.
It worked for me on the L2024.2 version.
Best,
Lily
DRay
·1 year agoHi @Astroraf,
I have reached out internally to try and get an answer.
Rafael Ferreira
·1 year agoI tried to replicate the result using the E-Commerce data and all I am getting is this, with no option to click the other buttons intapiuser, do you know this is because this solution provided does not work with the latest update in Sisense?