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:
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:
