cancel
Showing results for 
Search instead for 
Did you mean: 

How do we change the time period if we are using "Dashboard Filters (by Filter name)"?

MuznahM
8 - Cloud Apps
8 - Cloud Apps

MuznahM_0-1723783312576.png

 

 

How do we change the time period if we are using "Dashboard Filters (by Filter name)"? For example, I made separate date range buttons linked to dashboard date range filters such as “Last 90 Days,” “Last 30 Days,” “Last 7 Days,” "Last Month," "Last Quarter," and "Last Year".

In the BloX editor, I used code like this:

{
    "style": "",
    "script": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "width": "50%",
            "style": {
                "margin": "0 auto",
                "background-color": "#FFFFFF"
            },
            "items": [
                {
                    "type": "ColumnSet",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center",
                        "background-color": "#FFFFFF"
                    },
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "style": "",
                            "items": [
                                {
                                    "type": "ActionSet",
                                    "actions": [
                                        {
                                            "title": "Last 1 Day",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "1",
                                                            "last": {
                                                                "offset": 1,
                                                                "count": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            "title": "Last 30 Day",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "2",
                                                            "last": {
                                                                "count": 30,
                                                                "offset": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            "title": "Last 90 Day",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "3",
                                                            "last": {
                                                                "count": 90,
                                                                "offset": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            "title": "Last Month",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "4",
                                                            "last": {
                                                                "count": 1,
                                                                "offset": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            "title": "Last Quarter",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "5",
                                                            "last": {
                                                                "count": 1,
                                                                "offset": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            "title": "Last Year",
                                            "type": "Filters",
                                            "data": {
                                                "filters": [
                                                    {
                                                        "filterName": "Date Range",
                                                        "filterJaql": {
                                                            "selectedVal": "6",
                                                            "last": {
                                                                "count": 1,
                                                                "offset": 1
                                                            },
                                                            "multiSelection": true
                                                        }
                                                    }
                                                ]
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

 

It is not changing the 'level' such as days, months, quarters, or years. Instead, it is only changing the count and offset value of the filter. So, I added script-level code and gave each button 'selectedVal', and in the script editor, I used code like this:

// Preserve Blox filter inputs after filter change, sync with current filter state
widget.on('ready', function () {
	// Only hide the title for viewers of the dashboard
	if (prism.user.roleName == 'consumer'){ 
		$('widget-header', element.parent()).css('display','none'); 
	}
    // Modify to match the relevant filter title
    let filterModifiedName = "Date Range"

    filterModifiedName = filterModifiedName.toLowerCase()
	
    // Variable containing the Dashboard filter modified by Blox
    let modifiedFilter = widget.dashboard.filters.$$items.find(function (filterItem) {
        return !filterItem.isCascading && filterItem.jaql && filterItem.jaql.title && filterItem.jaql.title.toLowerCase() === filterModifiedName;
    });
	
    // If relevant filter has from and to values selected (change as needed if filter uses members or any other type of filter)
    if (modifiedFilter && modifiedFilter.jaql && modifiedFilter.jaql.filter && modifiedFilter.jaql.filter.radiotVal) {

		// Filter from and to value from dashboard filters
		let selectedVal = modifiedFilter.jaql.filter.radiotVal;
		console.log(selectedVal);
		if(selectedVal === "1") {
			modifiedFilter.jaql.level = "days"
		}
		
		if(selectedVal === "2") {
			modifiedFilter.jaql.level = "days"
		}
		
		if(selectedVal === "3") {
			modifiedFilter.jaql.level = "days"
		}
		
		if(selectedVal === "4") {
			modifiedFilter.jaql.level= "months"
		}
		
		if(selectedVal === "5") {
			modifiedFilter.jaql.level = "quarters"
		}
		
		if(selectedVal === "6") {
			modifiedFilter.jaql.level = "years"
		}
		

        // Change filter ID selector as needed, to match ID parameter of input Elements
        let inputElementOffset = $('[id="data.filters[0].filterJaql.selectedVal"]', element)[0]
		
        // Set value of inputs to value of filter
        inputElementOffset.value = selectedVal

    }


})
  



It actually changes the time period (e.g., 'level': 'month'), but it's not working as expected. Is there any better solution for this other than "Dashboard Filters (by Dimensions)"?

Regards
Muznah

2 ACCEPTED SOLUTIONS

ILLIA
Sisense Team Member
Sisense Team Member

@MuznahM Greetings
As per our thread in the ticket, will also attach custom action implementation here:

Custom action name: setFilterWithLevel

Custom action code:

 

let itemArr = prism.activeDashboard.filters.$$items;
let OurFilter = itemArr.find(function (x) {
    return x.jaql && x.jaql.title === payload.data.filters[0].filterName
});
OurFilter.jaql.level = payload.data.level;
OurFilter.jaql.filter = payload.data.filters[0].filterJaql;
payload.widget.dashboard.filters.update(OurFilter, {save:true, refresh: true});

 

Custom action accepted values (not necessary to specify particular values): 

 

{
    "type": "setFilterWithLevel",
    "title": "title"
}

 

 Custom action usage example:

 

{
    "title": "Last 30 Days",
    "type": "setFilterWithLevel",
    "data": {
        "level": "days",
        "filters": [
            {
                "filterName": "Date Range",
                "filterJaql": {
                    "selectedVal": "2",
                    "last": {
                        "count": 30,
                        "offset": 1
                    },
                    "multiSelection": true
                }
            }
        ]
    }
}

 

Now level can be passed in the filter using pretty much same syntax as default OOTB action for filters.

Best regards,

 

ILLIA

View solution in original post

MuznahM
8 - Cloud Apps
8 - Cloud Apps

Hi @ILLIA ,

It’s working as expected now. Thank you so much for providing such a great solution.

I have one more question: Is it possible to sync both the custom button filter (as mentioned in the previous ticket) and the dashboard filter, specifically the "from" and "to" date range filters?

I tried using a script, but it didn’t work as expected. I’ve made some modifications to the solution you provided, which successfully changes the button color when selected.

// Holds the chosen granularity from the selected button 'months' for example
const dategran = payload.title;
//Change the background color for unselected buttons
payload.widget.style.currentCard.body[0].items[0].columns[0].items[0].actions.forEach(function (i) {
    i.style["background-color"] = '#D3D3D3'
})

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

//Redraw the changes
payload.widget.redraw()

let itemArr = prism.activeDashboard.filters.$$items;
let OurFilter = itemArr.find(function (x) {
    return x.jaql && x.jaql.title === payload.data.filters[0].filterName
});
OurFilter.jaql.level = payload.data.level;
OurFilter.jaql.filter = payload.data.filters[0].filterJaql;
payload.widget.dashboard.filters.update(OurFilter, {save:true, refresh: true});


However, I want to implement two additional modifications:

  1. When editing the dashboard filter (e.g., changing the date range from "Last 90 days" in the custom filter to "Last 1 month" using the date range filter), I need the custom filter button selection to automatically switch to "Last 1 month."

  2. If I select a filter option that isn’t available in the custom filter buttons, I need all the buttons to be deselected.

Is it possible to achieve this scenario using a script?

Thank you for your assistance.

Best Regards,
Muznah Musthafa

 

View solution in original post

3 REPLIES 3

DRay
Community Team Member
Community Team Member

Hello @MuznahM.

Thank you for reaching out. I have asked internally to try and get you an answer.

David Raynor (DRay)

ILLIA
Sisense Team Member
Sisense Team Member

@MuznahM Greetings
As per our thread in the ticket, will also attach custom action implementation here:

Custom action name: setFilterWithLevel

Custom action code:

 

let itemArr = prism.activeDashboard.filters.$$items;
let OurFilter = itemArr.find(function (x) {
    return x.jaql && x.jaql.title === payload.data.filters[0].filterName
});
OurFilter.jaql.level = payload.data.level;
OurFilter.jaql.filter = payload.data.filters[0].filterJaql;
payload.widget.dashboard.filters.update(OurFilter, {save:true, refresh: true});

 

Custom action accepted values (not necessary to specify particular values): 

 

{
    "type": "setFilterWithLevel",
    "title": "title"
}

 

 Custom action usage example:

 

{
    "title": "Last 30 Days",
    "type": "setFilterWithLevel",
    "data": {
        "level": "days",
        "filters": [
            {
                "filterName": "Date Range",
                "filterJaql": {
                    "selectedVal": "2",
                    "last": {
                        "count": 30,
                        "offset": 1
                    },
                    "multiSelection": true
                }
            }
        ]
    }
}

 

Now level can be passed in the filter using pretty much same syntax as default OOTB action for filters.

Best regards,

 

ILLIA

MuznahM
8 - Cloud Apps
8 - Cloud Apps

Hi @ILLIA ,

It’s working as expected now. Thank you so much for providing such a great solution.

I have one more question: Is it possible to sync both the custom button filter (as mentioned in the previous ticket) and the dashboard filter, specifically the "from" and "to" date range filters?

I tried using a script, but it didn’t work as expected. I’ve made some modifications to the solution you provided, which successfully changes the button color when selected.

// Holds the chosen granularity from the selected button 'months' for example
const dategran = payload.title;
//Change the background color for unselected buttons
payload.widget.style.currentCard.body[0].items[0].columns[0].items[0].actions.forEach(function (i) {
    i.style["background-color"] = '#D3D3D3'
})

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

//Redraw the changes
payload.widget.redraw()

let itemArr = prism.activeDashboard.filters.$$items;
let OurFilter = itemArr.find(function (x) {
    return x.jaql && x.jaql.title === payload.data.filters[0].filterName
});
OurFilter.jaql.level = payload.data.level;
OurFilter.jaql.filter = payload.data.filters[0].filterJaql;
payload.widget.dashboard.filters.update(OurFilter, {save:true, refresh: true});


However, I want to implement two additional modifications:

  1. When editing the dashboard filter (e.g., changing the date range from "Last 90 days" in the custom filter to "Last 1 month" using the date range filter), I need the custom filter button selection to automatically switch to "Last 1 month."

  2. If I select a filter option that isn’t available in the custom filter buttons, I need all the buttons to be deselected.

Is it possible to achieve this scenario using a script?

Thank you for your assistance.

Best Regards,
Muznah Musthafa