BloX custom script which adjusts functionality to existing solution for date filter
Summary: Vlad Solodkyi provides a detailed guide on implementing a persistent date filter using the BloX widget. The post explains how to accomplish the functionality so that selected dates remain even after the page is refreshed. Instructions include navigating to the dashboard, using browser Dev tools to capture query requests, and applying a specific script to retain date filter settings. The guide is intended for users familiar with editing scripts in Sisense.
You can refer to the following article: https://community.sisense.com/forum/blox-30/topic/creating-from-to-date-using-blox-4576/ which already does have a working solution on how to create a date filter with BloX widget, however 100% of customers are expecting after selecting dates within the BloX widget to stay selected, even If the page would be refreshed.
This guide would explain and walk you through on how to accomplish such functionality.
Please navigate to your Dashboard -> BloX widget edit view -> 3 dots to edit script
Pasting the following script:
First of all we need to define the date filter for BloX, in order to do so we need to use the following variable:
var dateDim = // as the value we need to take the JSON definition of filter in order to do so, please follow steps from below:
Navigate to dashboard and open the Dev tools in your browser
Once the Dev tool has been opened, navigate to Network tab
Then hit edit button against your date filter, so Network tab would capture the query request to server
then click on the captured jaql and select Response tab, where you should see “dim” parameter, as we need the value of “dim”, please copy it. As you can see based on the screenshot in my case the value is: "[Admissions.Admission_Time (Calendar)]"
Now once we have defined the date Filter dimension, we can use the following script:
var dateDim = “[Admissions.Admission_Time (Calendar)]”'; //value we took from steps above
var toDate;
widget.on('ready', function() {
try {
if (toDate && getFilter(dateDim).to) {
document.getElementById('data.filters[0].filterJaql.to').value = toDate;
}
} catch(err) {
document.getElementById('data.filters[0].filterJaql.to').value = '';
}
document.getElementById('data.filters[0].filterJaql.to').addEventListener("change", checkValue);
})
var fromDate;
widget.on('ready', function() {
try {
if (fromDate && getFilter(dateDim).from) {
document.getElementById('data.filters[0].filterJaql.from').value = fromDate;
}
} catch(err) {
document.getElementById('data.filters[0].filterJaql.from').value = '';
}
document.getElementById('data.filters[0].filterJaql.from').addEventListener("change", checkValue);
})
widget.on('initialized', function() {
try {
var filter = getFilter(dateDim);
toDate = filter.to;
fromDate = filter.from;
} catch(err) {
//Cannot get from/to
}
})
function checkValue() {
if (document.getElementById('data.filters[0].filterJaql.to').value) {
toDate = document.getElementById('data.filters[0].filterJaql.to').value;
}
if (document.getElementById('data.filters[0].filterJaql.from').value) {
fromDate = document.getElementById('data.filters[0].filterJaql.from').value;
}
}
function getFilter(dim) {
return widget.dashboard.filters.item(true, dim).jaql.filter;
}
