Change Date Granularity of a Widget using BloX

[intapiuser]

This article will cover the below options:

Section 1- Buttons + Highlight Background-Color - Creating Buttons of date granularity slicing options (Alternative for Tabber plugin)

OR

Section 2 - Dropdown List - Creating Drop-down list with Date granularity slicing options (Alternative for Tabber plugin)

------------------------------------------------------------------------

Section 1- Buttons + Highlight Background-Color: 

You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (Buttons-DateGranularityBloX.dash)

Step 1:  Create a BloX widget and use this snippet in the Editor tab: (or import this JSON file as a BloX template)

Provide the widget ID to apply the change, you can apply on multiple widgets :

"widgetToModify": ["5f7b91e27051052128453cdf","5f7b91e27051052128sdfcer"]

 "style": "",
 "script": "",
 "title": "",
 "titleStyle": [
 {
 "display": "none"
 }
 ],
 "showCarousel": true,
 "body": [],
 "actions": [
 {
 "type": "dynamicGranSwap",
 "title": "Years",
 "style": {
 "background-color": "#1D426C"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "years"
 },
 {
 "type": "dynamicGranSwap",
 "title": "Quarters",
 "style": {
 "background-color": "#D3D3D3"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "quarters"
 },
 {
 "type": "dynamicGranSwap",
 "title": "Months",
 "style": {
 "background-color": "#D3D3D3"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "months"
 },
 {
 "type": "dynamicGranSwap",
 "title": "Weeks",
 "style": {
 "background-color": "#D3D3D3"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "weeks"
 },
 {
 "type": "dynamicGranSwap",
 "title": "Days",
 "style": {
 "background-color": "#D3D3D3"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "days"
 },
 {
 "type": "dynamicGranSwap",
 "title": "Hours",
 "style": {
 "background-color": "#D3D3D3"
 },
 "data": {
 "widgetToModify": [
 "5f7b91e27051052128453cdf"
 ]
 },
 "dategran": "minutes"
 }
 ]
}

Step 2:  Create a custom action with the below code and name it "dynamicGranSwap":

Adjust the background color of unselected & selected buttons

// Holds the chosen granularity from the selected button 'months' for example
const dategran = payload.dategran;
var widgetIds = payload.data.widgetToModify;

//Change the background color for unselected buttons
payload.widget.style.currentCard.actions.forEach(function(i){
 i.style["background-color"] = '#D3D3D3' 
})

//Change the background color for selected buttons
payload.widget.style.currentCard.actions
.filter(i => i.dategran == dategran)[0].style["background-color"] = "#1D426C"
//Redraw the changes
payload.widget.redraw()

//For each widget change the data granularity
payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){
 //change the level of granularity to the chosen value from our button: 'months' for example
 widget.metadata.panels[0].items[0].jaql.level = dategran;
//Apply changes to Mongo
 widget.changesMade()
//Refresh widget
 widget.refresh()
 })

Section 2 - Dropdown List:

You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (DateGrnularityBloX.dash)

Step 1:  Create a BloX widget and use this snippet to create the choice-set:

{
 "type": "Input.ChoiceSet",
 "id": "data.choicesetvalue",
 "class": "",
 "displayType": "compact",
 "value": "1",
 "choices": [
 {
 "title": "Hours",
 "value": "minutes"
 },
 {
 "title": "Days",
 "value": "days"
 },
 {
 "title": "Weeks",
 "value": "weeks"
 },
 {
 "title": "Months",
 "value": "months"
 },
 {
 "title": "Quarters",
 "value": "quarters"
 },
 {
 "title": "Years",
 "value": "years"
 }
 ]
 } 

Step 2:  Create a custom action with the below code and name it "DateGranDrill"

(provide the widget ID to apply the change - can apply on multiple widgets):

var gran = payload.data.choicesetvalue // Holds the chosen granularity 'months' for example
var widgets = ['5ec291c181203611649756f6','5ec291c121803611649756c7'] //Apply this action on widget ids

//for each widget id 
widgets.forEach(myfunction)
function myfunction (item)
{
var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item) 
widgetfindid.metadata.panels[0].items[0].jaql.level = gran //change the level of granularity to the chosen value 'months' for example or the item location (currently 0)
widgetfindid.changesMade() //apply changes to Mongo
widgetfindid.refresh() //refresh the widget
}

Step 3:  Use the action you've created in the editor under "actions" section: 

 "actions": [
 {
 "type": "DateGranDrill",
 "title": "Apply"
 }
 ]

[Wojtek]

HI @intapiuser . Sisense changed Signature of 

widget.changesMade()

function in L2022.9 release, which is breaking the script.

https://docs.sisense.com/main/SisenseLinux/l2022-9-release-notes.htm

Could you kindly provide updated code.

Thanks,

Wojtek

[zach_myt]

@Wojtek I was able to get this to work by just commenting out the changesMade() line. It doesn't throw an error in the console either. Can you try that?

[Wojtek]

HI @zach_myt we went with replacing 

widget.changesMade()

with 

widget.changesMade('someEvent', ['metadata', 'properties_changed']);

literally as per documentation.  Thanks for suggestion anyway.

[Astroraf]

This part is unclear @intapiuser, @Wojtek for the dropdown list. 

 "actions": [
 {
 "type": "DateGranDrill",
 "title": "Apply"
 }
 ]

Does this go in this editor section or does this go in the second part in making the action?

[Wojtek]

Hey @Astroraf 

That "Step 2 of 2" when creating action is just a hint displayed when you go into "May Actions" for users to know how to use created action.

That also how you would use it in the editor. So answer is yes and yes for your question.

Thanks,

Wojtek

[Astroraf]

@Wojtek I updated my code to correctly display the right information now in the editor box, but when clicking the apply button it does not seem to work. This is my code thus far:

{

"style": "",

"script": "",

"title": "",

"showCarousel": true,

"body": [

 {

"type": "Container",

"items": [

 {

"type": "Input.ChoiceSet",

"id": "data.choicesetvalue",

"class": "",

"displayType": "compact",

"value": "1",

"choices": [

 {

"title": "Days",

"value": "days"

 },

 {

"title": "Weeks",

"value": "weeks"

 },

 {

"title": "Months",

"value": "months"

 },

 {

"title": "Quarters",

"value": "quarters"

 },

 {

"title": "Years",

"value": "years"

 }

 ]

 }

 ]

 }

 ],

"actions": [

 {

"type": "DateGranDrill",

"title": "Apply"

 }

 ]

}

And this is my action code: 

Step 1 or 2:

var gran = payload.data.choicesetvalue // Holds the chosen granularity 'months' for example

var widgets = ['660afb3faaa5b400330f88a3', '660afb66aaa5b400330f88a5'] //Apply this action on widget ids

//for each widget id 

widgets.forEach(myfunction)

function myfunction(item) {

var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item)

 widgetfindid.metadata.panels[0].items[0].jaql.level = gran //change the level of granularity to the chosen value 'months' for example or the item location (currently 0)

 widget.changesMade('someEvent', ['metadata', 'properties_changed']); //apply changes to Mongo

 widgetfindid.refresh() //refresh the widget

}

Step 2 of 2 create Action:

{
  "type": "DateGranDrill",
  "title": "Apply"
}

Is there something I am missing? I believe I have done all the correct steps.