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

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

MuznahM

Posted 1 year ago·Last reply 1 year ago

3 comments

MuznahM

OP1 year ago

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:

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

Ilya Kvashenko

Admin1 year ago

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,

DRay

·1 year ago

Hello MuznahM.

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