How to make Switchable Dimension with Radio Buttons
Hi harikm007 DRay
I am trying to create a radio button switcable dimensional changer and wanted to see if it can be done with Radio Buttons, my current script is:
{
"title": "",
"style": "",
"script": "",
"showCarousel": true,
"body": [
{
"type": "Input.ChoiceSet",
"id": "radiotVal",
"displayType": "expanded",
"layout": "horizontal",
"isMultiSelect": false,
"value": "1",
"choices": [
{
"title": "Total Revenue",
"value": "1"
},
{
"title": "Total Quantity",
"value": "2"
}
]
}
],
"events": [
{
"type": "valueChanged",
"elementId": "radiotVal",
"actions": [
{
"type": "SwitchMeasure",
"title": "DEBUG: event fires?",
"script": "console.log('[BloX] valueChanged fired, selectVal=', {{radiotVal.value}}); alert('Radio changed to ' + {{radiotVal.value}});"
}
]
}
],
"actions": []
}The radio buttons show up but they do not switch the measures for the widgets I targeted. I am also okay with not specifically targeting widgets but affecting all the widgets on the dashboard. This is the script for the action:
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('plugin-BloX', 'metadata');
widget.refresh();
})
I am not sure if this is the correct Action script since this is used from: https://community.sisense.com/kb/blox/changing-measures-in-the-entire-dashboard-using-blox-user-interface/8802
Hi Astroraf ,
Hope the script below works for you!
Blox script:
{ "title": "", "style": "", "script": "", "showCarousel": true, "body": [ { "type": "Container", "class": "radiotval-dimswitch", "items": [ { "type": "Input.ChoiceSet", "id": "radiotVal", "displayType": "expanded", "choices": [ { "title": "Total Revenue", "value": "0" }, { "title": "Total Quantity", "value": "1" } ] } ] } ], "actions": [] }Also add below widget script to the blox widget. Here add ids of target widgets to widgetids array.
widget.on('domready',function(widget, args){ widgetIds = ['68ffba3fa3420a7cd45d34feb', '68ffba47aa380a7cd27d34fed']; const radios = document.querySelectorAll('.radiotval-dimswitch input'); refWidget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetIds[0]); if (refWidget.metadata.panels[1].$$widget.type == 'indicator') { defaultPanel = refWidget.metadata.panels[0].items[0].jaql.title; } else { defaultPanel = refWidget.metadata.panels[1].items[0].jaql.title; } defaultMeasureIndex = widget.metadata.panels[1].items.findIndex(i=>i.jaql.title === defaultPanel); radios.forEach(radio => { radio.checked = (radio.value == defaultMeasureIndex); }); radios.forEach(r => r.addEventListener('change', e => { dimToSwapTo = widget.metadata.panels[1].items[event.target.value].jaql; switchMeasure(dimToSwapTo) })); }) function switchMeasure(dimToSwapTo){ prism.activeDashboard.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('plugin-BloX', 'metadata'); widget.refresh(); }) }Result:
Please let me know if you have any questions
-Hari
