Display Selected filter and filter value at top of the report

Hello Team,

I want to Display the selected filter values at the top of the report. How can i achieve this ? Note: I am using Helical Insight version 5.2.1.

Hello Netta,

(a) First create the report with the required filter.

(b) Then go to Properties section, add Subtitle. Leave it blank, don’t put any text here in the Text placeholder. Other properties like its position also you can decide and put.

image

(c) Then go to Postfetch and put the below code. This below code will put the filter content of first filter (whose filter id is 0) value here.
properties.subTitle.value= Filters ${filters[0].alias} : ${filters[0].values.join(", ")}`

image

You can see that at the top left of the report Filter name and filter values are appearing.






(2) Further, we are giving some more additional code below. This below code will list down all the filters with their values in same line separated by ';' and whenever there is all values selected at report filter level it will show as All. No changes are required in this code it will work as it is with all the reports.
properties.subTitle.value = "Filters:"; 

filters.forEach((filter, index) => {
    var values = filter.values.map(value => value === "_all_" ? "ALL" : value);
    properties.subTitle.value += `${filter.alias} : ${values.join(", ")}`;
    
    // Add a semicolon after each filter, except for the last one
    if (index < filters.length - 1) {
        properties.subTitle.value += "; ";
    }
});

Now your report can also have multiple filters.







There could be cases when you can have multiple filters in a report. This below code will list down all the filters with their values in separate lines and whenever there is all it will show as All. Here the user need to update the id of the report which we find in CSS section at the top.

var ElementId = '#hi-report-41osnhja'

setTimeout(() =>{
var spanEl = document.createElement('span')
spanEl.innerHTML = "Filters:<br>"
console.log(filters)
filters.forEach((filter) => {
    var values = filter.values.map(value => value === "_all_" ? "ALL" : value);
    spanEl.innerHTML += `<div>${filter.alias} : ${values.join(", ")}</div>`;
});
	
	document.querySelector(`${ElementId} .title-subtitle-container`).appendChild(spanEl)
},3000)

image
So you can see it is showing multiple filters and its selected values.

Thank You,
Helical Insight Team.