Using BloX To Dynamically Change a Dimension
The goal is to allow users to dynamically choose a dimension. The below script will work with a table or a pivot table, but it can be modified to work with other widget types as well.
Step 1
Create a BloX widget with the below script. It will consist of a simple drop down input and an action button.
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"delay": 0,
"showButtons": false
},
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Choices",
"style": {
"margin-left": "100px",
"margin-right": "100px"
}
},
{
"type": "Input.ChoiceSet",
"id": "dropdownVal",
"class": "",
"displayType": "compact",
"value": "1",
"choices": "{choices:colName}",
"style": {
"margin-left": "100px",
"margin-right": "100px"
}
}
]
}
],
"actions": [
{
"type": "Modify Pivot",
"title": "Change Dimension"
}
]
}
Please note: In the above example, the drop down choices are coming from the field 'ColName.' The values in ColName exactly match the target field names in the ElastiCube. The drop down choices could be input manually, but they must exactly match the target field names in the ElastiCube.
Step 2
Create a table, or pivot table. In this example, I have added two columns. The title in the example is 'Test Widget Title.'
Step 3
Using the console, determine the widget index and target panel.
First, open the developer console and type:
prism.activeDashboard.widgets.$$widgets
You will see a list of all widgets on a dashboard. Look for the correct title or widget type. Note the widget index (it is 6, in this example).
Second, navigate to:
prism.activeDashboard.widgets.$$widgets[6].metadata.panels
There, note the index of the panel we would like to modify. In this example, we want to modify a column, that is the first object in panels (index = 0).
Finally, open 'Items.' Each item is a field that was added to the columns panel in the target widget. Note the index of the field we want to change. In the example, we want to change the second column (index = 1).
Step 4
Create a custom BloX action to target the correct panel item and change it to the user input value. Use the below script for the action:
//Variable that stores the user's input
var dropdownInput = payload.data.dropdownVal;
//Variable that stores the target widget
var widget = prism.activeDashboard.widgets.$$widgets[6];
widget.metadata.panels[0].items[1].field.id = "[Exports." + dropdownInput + "]";
widget.metadata.panels[0].items[1].jaql.dim = "[Exports." + dropdownInput + "]";
widget.metadata.panels[0].items[1].jaql.title = dropdownInput;
widget.metadata.panels[0].items[1].jaql.column = dropdownInput;
//Refresh widget
widget.refresh();
var widget = prism.activeDashboard.widgets.$$widgets[6];
widget.metadata.panels[0].items[1].x
"[Exports."
-
Very useful, thanks Jayson Yurcho! Any idea how this could be adapted so that the user could select multiple dimensions from the dropdown?
0
Please sign in to leave a comment.
Comments
1 comment