- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-15-2024 09:45 PM
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
- Labels:
-
Blox
-
Community News
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2024 12:19 AM
@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,
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2024 12:43 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-19-2024 01:26 PM
Hello @MuznahM.
Thank you for reaching out. I have asked internally to try and get you an answer.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2024 12:19 AM
@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,
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2024 12:43 AM
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

