ProductsAI & Analytics

Extend iHub Interactive Viewer with Fast Filters [Code]

Fifth in a series of blog posts about free extensions to OpenText Interactive Viewer.

fastFilterDemo_dropdown_2

 

Do you want to enable your users to filter a table in an iHub report with just a few clicks?  If a column in a table has just a few discrete values, you can make column-based filtering easy using a technique we call Fast Filter.

This post shows how to create a Fast Filter – in short, a selectable drop-down menu of distinct values that appears in the header of a column. (The screenshot above shows how a Fast Filter looks for users.) Users can combine multiple Fast Filters to find the data that they are looking for, because when a user Fast Filters values in one column, the rest of the columns only display values according to their own filters. With Fast Filters, app users don’t have to waste time filtering columns individually or otherwise fine-tuning the data in a table.

The steps for creating Fast Filters are:

  • Add a text item to the header of each column that you want to filter on.
  • Change the type of each text item to “HTML”.
  • Copy the following HTML code into each text element.
<select id='{COLUMN}_FILTER' onchange='javascript:filterColumn("{COLUMN}")'     style="width:100px;">

</select>

Here’s how this looks on screen:

FastFilterTExtItem

  • In the HTML code for each column header, replace “{COLUMN}” with the dataset column name.
  • In clientscriptsonContextUpdate, paste the code found at the end of this document as shown below. (You can download the code in a text file, or download the Report Design.) You can find clientscriptsOnContentUpdate by clicking on an empty portion of the Layout Manager, clicking on the Script tab, and selecting clientScripts in the first pulldown and onContentUpdate in the second. It will look like this:

FastFilterJavascript

  • Add every column that you created a Fast Filter HTML item for to the column list. In the example above,  we are not enabling Fast Filter for the “TOTALREVENUE” column, so our column list is:
columns[0] = "COUNTRY";
columns[1] = "PRODUCTVENDOR";
columns[2] = "PRODUCTLINE";
columns[3] = "PRODUCTNAME";
columns[4] = "REVENUEYEAR";

Troubleshooting

If your embed code is not working, try debugging in Chrome.

If you add “debugger” in your JavaScript, Chrome will break at that point when Chrome tools debugger is open.

Conclusion

We can make it easy for users to find the information that they want by simply adding a drop-down to the column header and including a small amount of JavaScript.

The next (and final) extension blog entry will demonstrate how to use JSAPI to search multiple columns in a table at the same time.

Links to other blog posts in this series:

1. Extend Interactive Viewer with Row Highlighting

2. Extend Interactive Viewer with a Pop-Up Dialog Box 

3. Extend iHub Reports and Dashboards with Font Symbols

4. Extend iHub Dashboards with Disqus Discussion Boards

6. Extend Interactive Viewer with Table-Wide Search

 

 

Fast Filter Javascript Code

var columns = new Array();

 

this.createFastFilters = function () {

debugger;

columns[0] = "COUNTRY";

columns[1] = "PRODUCTVENDOR";

columns[2] = "PRODUCTLINE";

columns[3] = "PRODUCTNAME";

//columns[5] = "TOTALREVENUE";

columns[4] = "REVENUEYEAR";

// Initialize the state of each column filter to not filtered.

for (var i = 0; i < columns.length; i++) {

 

if (sessionStorage[columns[i] + ".state"] == null) {

sessionStorage[columns[i] + ".state"] = "Not Filtered";

}

 

}

var table = this.getViewer().getTable();

var request = new actuate.data.Request(table.getBookmark(), 0, 100);

request.setMaxRows(0);

request.setColumns(columns);

this.getViewer().downloadResultSet(request,this.addOptions);

 

}

 

this.addOptions = function(resultSet) {

debugger;

 

var columnIndex = 0;

 

 

var colValue;

var i;

var found;

// Load unique values into dropdowns

while (resultSet.next()) {

for (columnIndex = 0; columnIndex < columns.length; columnIndex++) {

found = false;

elem = document.getElementById(columns[columnIndex] + "_FILTER");

if (elem == null)    continue;                                           // Pass on column if not filterable

colValue = resultSet.getValue(columnIndex+1) != null ? resultSet.getValue(columnIndex+1) : "-- No Value --";

 

for (i=0; i<elem.length; i++) {                                       // See if we already put it in the list

if (elem.options[i].text == colValue) {

found = true;

break;

}

}

if (found) continue;

 

var option=document.createElement("option");

option.text=colValue;

try {

// for IE earlier than version 8

elem.add(option,elem.options[null]);

}

catch (e){

elem.add(option,null);

}

}

 

}

// If the column has too many values or is a number, consolidate.

 

 

// Now sort all the column filters and add the top level options

for (columnIndex=0; columnIndex < columns.length; columnIndex++) {

elem = document.getElementById(columns[columnIndex] + "_FILTER");

if (elem == null)    continue;                                           // Pass on column if not filterable

$("#" + columns[columnIndex] + "_FILTER").html($("#" + columns[columnIndex] + "_FILTER option").sort(function(x, y) {

return $(x).text() < $(y).text() ? -1 : 1;

}))

debugger;

var option=document.createElement("option");

option.text="<Clear Filter>";

try {

// for IE earlier than version 8

elem.add(option,elem.options[0]);

}

catch (e){

elem.add(option,0);

}

 

option=document.createElement("option");

option.text = sessionStorage[columns[columnIndex] + ".state"];

 

try {

// for IE earlier than version 8

elem.add(option,elem.options[0]);

}

catch (e){

elem.add(option,0);

}

 

elem.selectedIndex = 0;

 

}

 

}

 

window.myViewerId = this.id;

window.filterColumn = function(columnName) {

 

ddId = columnName + "_FILTER";

var elem = document.getElementById(ddId);

var strValue = elem.options[elem.selectedIndex].value;

var table = actuate.getViewer(myViewerId).getTable();

 

debugger;

if (strValue=="<Clear Filter>") {

table.clearFilters(columnName);

sessionStorage[columnName + ".state"] = "Not Filtered";

} else if (strValue=="< Top 5 >") {

var filter = new actuate.data.Filter(columnName, actuate.data.Filter.TOP_N, 5);

var myVal = filter.getValues();

table.setFilters(filter);

sessionStorage[columnName + ".state"] = "Filtered";

elem.selectedIndex = 0;

} else if (columnName == "TOTALREVENUE") {

var filter = new actuate.data.Filter(columnName, actuate.data.Filter.GREATER_THAN, strValue);

var myVal = filter.getValues();

table.setFilters(filter);

sessionStorage[columnName + ".state"] = "Filtered";

elem.selectedIndex = 0;

 

} else {

var filter = new actuate.data.Filter(columnName, actuate.data.Filter.EQ, strValue);

var myVal = filter.getValues();

table.setFilters(filter);

sessionStorage[columnName + ".state"] = "Filtered";

elem.selectedIndex = 0;

}

table.submit();

 

}

 

this.createFastFilters();
Show More

OpenText

OpenText is the leader in Enterprise Information Management (EIM). Our EIM products enable businesses to grow faster, lower operational costs, and reduce information governance and security risks by improving business insight, impact and process speed.

Related Posts

Back to top button
Close