Extend Interactive Viewer for iHub with Row Highlighting [Code]

Editor’s note: We’re updating and republishing a series of helpful tips for getting the most out of the Interactive Viewer tool for OpenText iHub with free extensions we’ve created. If you have any suggestions for further extensions or other resources, please let us know through the comments below.

First in a series of six.

Interactive Viewer, a module of OpenText™ iHub, is the go-to product for putting personalized  iHub content in all users’ hands. To make this hard-working product even better, two of our engineers, Clement Wong and Bill Clark, have created a suite of free extensions to Interactive Viewer that can improve both its appearance and usefulness. We’ll show off several of these extensions over the coming weeks on this blog.

Extending Interactive Viewer is a snap with the iHub JavaScript API. You can create any visualization imaginable using a resultset that you can access with a single JavaScript API call.

The first extension, enabled with just a few lines of jQuery code, adds row highlight capability to tables created for Interactive Viewer. As the user’s pointer moves up and down the table, the row is highlighted – a big help if the user is scanning a single column of a wide table. The result looks like this:

highlightTable yellow with cursor

To add this effect to your tables, simply add the following script in the table header as a text item. Set the item type as HTML.

<div id="here"></div> 
<script type="text/javascript"> 

var allCells = $("#here").closest("table").find( "td" ); 

allCells 
.on("mouseover", function() {
 var el = $(this);
 el.parent().css("background","#FFFFOO"); 
})
 .on("mouseout", function() {
 allCells.parent().css("background","");
 }); 

</script>

Copy the above, or you can download working Report Design source code here: TableRowHighlight

Beyond pure simplicity, this method has some nice features:  You can add it to new or existing reports very easily.  It’s simple to change the highlight color to match your existing UX. All other Interactive Viewer functions (like sorting columns) are unaffected.

As noted, this is just the first of a series of OpenText Interactive Viewer Extensions. The next extension we’ll share, also created using jQuery, adds a fully configurable pop-up dialog box to a table.

Links to other blog posts in this series:
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
5. Extend iHub Interactive Viewer with Fast Filters 
6. Extend Interactive Viewer with Table-Wide Search

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 Articles

Close