cancel
Showing results for 
Search instead for 
Did you mean: 
vsolodkyi
Sisense Team Member
Sisense Team Member

You can refer to the following article: https://community.sisense.com/t5/knowledge/creating-from-to-date-using-blox/ta-p/771 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.

  1. Please navigate to your Dashboard -> BloX widget edit view -> 3 dots to edit script
vsolodkyi_0-1682384826667.png

 

vsolodkyi_1-1682384826673.png
  • 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:

  1. Navigate to dashboard and open the Dev tools in your browser
  2. Once the Dev tool has been opened, navigate to Network tab vsolodkyi_2-1682384826676.png

     

  3. Then hit edit button against your date filter, so Network tab would capture the query request to servervsolodkyi_3-1682384826680.png

     

    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)]"
  4. 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;

}


 

Rate this article:
Version history
Last update:
‎04-24-2023 06:10 PM
Updated by:
Contributors