How to make Switchable Dimension with Radio Buttons

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

Rafael Ferreira

Posted 9 months ago·Last reply 9 months ago

6 comments

Rafael Ferreira

OP9 months ago

harikm007 thank you so much! You are truly a wizard! Thanks again for this code!

Rafael Ferreira

OP9 months ago

Hey harikm007 ,

Do the widget edit script work for Items as well or just Values and if it jsut works for Values in the BloX is there a way to make it work for Items in Sisense?

harikm007

·9 months ago

Yes, that's possible.

I made some changes in the widget script.

widget.on('domready',function(widget, args){
	widgetIds = ['68ffba4ca380a7cd27d34fed'];
	
	const radios = document.querySelectorAll('.radiotval-dimswitch input');
	
	refWidget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetIds[0]);

	defaultPanel = refWidget.metadata.panels[0].items[0].jaql.title;
		
	defaultMeasureIndex = widget.metadata.panels[0].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[0].items[event.target.value].jaql;
		switchMeasure(dimToSwapTo)
		
	}));
		
})

function switchMeasure(dimToSwapTo){
	prism.activeDashboard.widgets.$$widgets
		.filter(i => widgetIds.includes(i.oid))
		.forEach(function (widget) {
			
			widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
			
			widget.changesMade('plugin-BloX', 'metadata');
			widget.refresh();
	})
}

Also updated little bit in Blox script:

{
    "title": "",
    "style": "",
    "script": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "class": "radiotval-dimswitch",
            "items": [
                {
                    "type": "Input.ChoiceSet",
                    "id": "radiotVal",
                    "displayType": "expanded",
                    "choices": [
                        {
                            "title": "Category",
                            "value": "0"
                        },
                        {
                            "title": "Status",
                            "value": "1"
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

-Hari

Rafael Ferreira

OP9 months ago

harikm007 You are amazing! Thank you!

DRay

·9 months ago

Hi Astroraf,

I’m following up to see if the solution offered by harikm007 worked for you.

If so, please click the 'Accept as Solution' button on their post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

harikm007

·9 months ago

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

https://www.binextlevel.com/