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
Change an SVG color in BloX with criteria based on token - and for it to work with the carousel
Hello, my aim is to have a bar grow (change width, seems to be working fine) and change color based on if it exceeds a threshold. The issue is that the threshold will be client dependent. I have this script that works as intended for the initial display with static thresholds, but I want to replace the "parseInt('80')" and "parseInt('65')" in the script with tokens like "{panel:Threshold Good}" and "{panel:Threshold Meh}". It also fails to display the conditional color when I cycle on the carousel. Any assistance would be appreciated! { "style": ".conditional-bar-good{fill:#006100; stroke:#006100} .conditional-bar-meh{fill:#9C6500; stroke:#9C6500} .conditional-bar-bad{fill:#9C0006; stroke:#9C0006} .conditional-bar-na{fill:#000000; stroke:#000000}", "script": "$(document).ready(function(){let barClass = document.getElementById('conditional-bar');let cbw = parseInt(barClass.getAttribute('width'));if(cbw >=parseInt('80')){barClass.className.baseVal = 'conditional-bar-good';}else if(cbw>=parseInt('65')){barClass.className.baseVal = 'conditional-bar-meh';}else{barClass.className.baseVal = 'conditional-bar-bad';};});", "title": "", "showCarousel": true, "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "horizontalAlignment": "center", "spacing": "small", "text": "<svg width='80%' height='25'> <rect width='100%' height=100% rx='15' style='fill:#C6EFCE;stroke-width:1;stroke:#006100' /> <rect width='{panel:Threshold Good}%' height='100%' rx='15' style='fill:#FFEB9C;stroke-width:1;stroke:#9C6500' /> <rect width='{panel: Threshold Meh}%' height='100%' rx='15' style='fill:#FFC7CE;stroke-width:1;stroke:#9C0006' /> <rect id='conditional-bar' class='conditional-bar-na' y='20%' width='{panel:Value 1}%' height='60%' rx='10' style='fill-opacity: 0.7;stroke-width:3;' /></svg>" } ] }, { "spacing": "none", "type": "Container", "items": [ { "spacing": "none", "type": "TextBlock", "class": "condition_data", "text": "{panel:Label 1}", "horizontalAlignment": "center", "size": "medium", "weight": "bold" }, { "spacing": "none", "type": "TextBlock", "class": "condition_data", "text": "{panel:Value 1}%", "horizontalAlignment": "center", "size": "large", "weight": "bold" } ] } ], "actions": [] }
