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