cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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)
Buttons_-_DateGranu.gif
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
Screenshot_5.png
// 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)
date_granularity.gif
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):
mceclip0.png
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"
 }
 ]
Rate this article:
Comments
Wojtek
9 - Travel Pro
9 - Travel Pro

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
10 - ETL
10 - ETL

@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
9 - Travel Pro
9 - Travel Pro

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
10 - ETL
10 - ETL

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?

Screen Shot 2024-04-01 at 19.34.31.png

Wojtek
9 - Travel Pro
9 - Travel Pro

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
10 - ETL
10 - ETL

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?

Astroraf
10 - ETL
10 - ETL

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?

Version history
Last update:
‎03-02-2023 08:51 AM
Updated by:
Contributors