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

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

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: