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…

OpenText profile picture
OpenText

October 6, 20142 minute read

Interactive Viewer

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>

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:

  1. Extend Interactive Viewer with a Pop-Up Dialog Box
  2. Extend Interactive Viewer with Table-Wide Search

Share this post

Share this post to x. Share to linkedin. Mail to
OpenText avatar image

OpenText

OpenText, The Information Company, enables organizations to gain insight through market-leading information management solutions, powered by OpenText Cloud Editions.

See all posts

More from the author

How Pick n Pay plans to transform software test cases with AI

How Pick n Pay plans to transform software test cases with AI

Beta tester reports OpenText DevOps Aviator delivers fast, accurate results

5 minute read

Manutan combines digital services with the human touch to delight customers

Manutan combines digital services with the human touch to delight customers

At Manutan, we equip businesses and communities with the products and services they require to succeed. Headquartered in France, our company has three divisions, serving…

4 minute read

Reaching new markets in Europe and beyond

Reaching new markets in Europe and beyond

How information management specialists at One Fox slashed time to market for innovative products with OpenText Cloud Platform Services At One Fox, we’ve driven some…

4 minute read

Stay in the loop!

Get our most popular content delivered monthly to your inbox.