BloX custom script which adjusts functionality to existing solution for date filter
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.
- 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; } |
