Creating A Dynamic Rank Button With BloX

[intapiuser]

This post details how to create a 'rank' button to filter a widget based on user input. Ex: if the user inputs a 5, the widget will show the top 5 records by the measure of choice. 

Step 1

Create the desired widget (it does not have to be a table) including the desired filter field, as a widget filter. Ensure this filter is a ranking. 

Step 2

Open the console in the developer tools and type the following:

prism.activeDashboard.widgets.$$widgets

Take note of the index of the target widget(s) (the index in this example is 1). You can identify the target widget by the widget type, the id, or the title. 

Step 3

While still in the console, navigate to

prism.activeDashboard.widgets.$$widgets[i].metadata.panels[3].items[0].jaql

Copy everything in the JAQL attribute. We will need to create a BloX action that adds and removed this from the target widgets. 

Step 4

Create a BloX widget consisting of a simple number input and button. Example is below. 

{
"style": {},
"script": "",
"title": "",
"titleStyle": [
{
"display": "show"
}
],
"showCarousel": true,
"carouselAnimation": {
"showButtons": false
},
"body": [
{
"type": "Container",
"overflow": "auto"
},
{
"type": "ColumnSet",
"overflow": "auto",
"separator": false,
"spacing": "default",
"columns": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Top",
"style": {
"justify-items": "left",
"align-items": "left",
"margin-left": "3%"
}
},
{
"type": "Input.Number",
"id": "data.userInput",
"class": "",
"title": "New Input",
"style": {
"justify-items": "left",
"align-items": "left",
"margin-left": "%"
},
"placeholder": "Ranking by entities"
}
]
}
],
"actions": [
{
"type": "TopX",
"title": "Top X"
}
]
}

Step 5

Create a custom BloX action and paste in the following. Ensure the action title matches that of the button's action in the widget script. Please make the following configuration changes:

1. Change the index in 'widgetIndexArray' to match the index in Step 2. You could add more than one index if you wand multiple widgets to be affected. Please note, a widget's index may change if more widgets are added or removed. This script can be modified to use a widget's title or id instead. 
2. Paste the JAQL copied in Step 3 into the variable 'topJAQL.' It may be necessary to format correctly as a JSON object. 
3. Replace the number portion of 'to:x' with 'to: userInput'. The variable 'userInput' will contain the user's input and will be used to filter the JAQL.
4. Change the title of the JAQL query to 'CustomBloXFilter'. This is necessary for the checks performed within the BloX Custom action. 
5. Optional: The script below will stop and an alert will be displayed if a user enters null or a negative number. If this is not desired, remove the following:

//If the user enters a negative number, or null, throw alert, stop script
if(Math.sign(userInput) != 1 && Math.sign(userInput) != 0){
alert("Wrong Input Was Entered");
}
//if the user enters a positive number, continue on with the script
else{.....}

//Variable that stores the user input
var userInput = parseInt(payload.data.userInput);
//Variable that stores all widgets that sound be affected
var widgetIndexArray = [1];

//If the user enters a negative number, or null, throw alert, stop script
if(Math.sign(userInput) != 1 && Math.sign(userInput) != 0){
alert("Wrong Input Was Entered");
}
//if the user enters a positive number, continue on with the script
else{

//Variable that stores the JAQL to add
var topJAQL = {

jaql:{
collapsed: false,
context:{
'[189F4-556]':{
agg: "sum",
column: "Revenue",
datatype: "numeric",
dim: "[Commerce.Revenue]",
table: "Commerce",
title: "Total Revenue"
},
'[278A8-341]':{
column: "Category",
datatype: "text",
dim: "[Category.Category]",
merged: true,
table: "Category",
title: "Category"
}
},
datasource: {title: "Sample ECommerce",
fullname: "LocalHost/Sample ECommerce",
id: "aLOCALHOST_aSAMPLEIAAaECOMMERCE",
address: "LocalHost",
database: "aSampleIAAaECommerce"},
filter:{
to: userInput
},
formula: "RANK([189F4-556], \"DESC\", \"1234\", [278A8-341])",
type: "measure",
title: "CustomBloXFilter"
}
}
//Loop through the widgetInsexArray
for(var i = 0;i<widgetIndexArray.length;i++){
//Get the widget index that corresponds to the index
var widgetOID = widgetIndexArray[i];
//Get the widget object
var widget = prism.activeDashboard.widgets.$$widgets[widgetOID];
if(typeof widget.metadata.panels[3].items[0] === 'undefined') {
// does not exist
widget.metadata.panels[3].items.push(topJAQL)
}
else {
// does exist
var filterFound = false;
//loop through all filters in the widget, only remove the BloX custom filter
//before adding another one.
for(var k = 0; k < widget.metadata.panels[3].items.length;k++){
//if the title of the filter == 'CustomBloXFilter, then remove'
if(widget.metadata.panels[3].items[k].jaql.title == 'CustomBloXFilter'){
filterFound = true;
delete widget.metadata.panels[3].items[k]
widget.metadata.panels[3].items[k] = topJAQL;
}
}
//widget.metadata.panels[3].items.shift()
if(filterFound == false){
widget.metadata.panels[3].items.push(topJAQL)
}
}
//refresh the widget
widget.refresh()
}
}

Step 6

Edit the target widget(s) and remove the widget filter. It is no longer needed.