Change Date Granularity of a Widget using BloX

This article will cover the below options:

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

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"
 }
 ]

intapiuser

Posted 3 years ago·Last reply 1 year ago

8 comments

Rafael Ferreira

·1 year ago

Hi DRay intapiuser ,

Is there a way to have the widget title change with Date Granularity?

Provided my own solution to this: https://community.sisense.com/t5/help-and-how-to/date-granularity-affecting-title-widget/m-p/26853#M1756

Be wary this may break in future versions of Sisesne

Rafael Ferreira

·1 year ago

Hi Wojtek,

I am just circling back to my comment, the second part of this example isn't working for me. Do you know why this would be happening?

Rafael Ferreira

·2 years ago

Hi Wojtek,

I am attempting the second part of this example and I get everything like the example but the apply button does not work, is this due to the version we are on?

Wojtek

·2 years ago

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

Rafael Ferreira

·2 years ago

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

·3 years ago

HI zach_myt we went with replacing

widget.changesMade()

with

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

literally as per documentation. Thanks for suggestion anyway.

Zach Williams

·3 years ago

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

·3 years ago

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