ProductsAI & Analytics

Extend iHub Reports and Dashboards with Font Symbols [Code]

Third in a series of blog posts about handy extensions to OpenText Interactive Viewer.

row of icons

Font symbols (like those above) are a great way to embed graphics into iHub reports and dashboards. We like them because they are vector rather than raster graphics, meaning they look great no matter how much you scale them, and are small in size. Since our reports are built in HTML5, you can do almost anything in them with font symbols.

There are numerous font symbol families like WingDings (used in the print world; these may already be on your computer) and Font Awesome. Font Awesome was used to build the examples here.  You can find a font symbol of almost anything with a quick internet search; just make sure to respect copyrighted material when you use a symbol.

There’s one more reason to use font symbols instead of raster graphics (such as JPEG, PNG or GIF files): the font itself does not need to be installed on the client machine, as long as you include the font in the report.

To include Font Awesome symbols in a report, enter the below line in clientScripts/clientInitialize:

head.js ("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",null);

We can suggest four great ways that you can use font symbols:

  • Icon buttons. The obvious use case is arrows (like on old-time cassette recorders) for next page, previous page, and end of report, but the variety of available symbol suggest many new uses.
  • Icon KPIs. You can create simple KPIs (Key Performance Indicators) with iHub table aggregators and a font symbol.  These KPIs are ideal for viewing on mobile devices.
  • Icon columns in a table. With a smidgen of JavaScript, you can add any font symbol to any column in a table. The symbol provides a quick-to-read representation of data.
  • Icons in bar charts. By adding a beforeDrawDataPoint function in the edit chart wizard, you can add font symbols to bar charts.

We created one report that uses font symbols in all four ways. Download it here.  Following are some specific step-by-step instructions for each suggested font symbol use.


Icon Buttons

buttons

Clicking on an icon-based button instead of (or along with) a word makes a report more visually interesting. The basic steps are:

  • Drag an HTML Button onto the layout. You may want to create a grid and add a text label.
  • In the General Properties tab, change the font to the symbol font that you are using (such as Font Awesome). In this tab, you can also set font properties like size and color (like the red, grey and blue above).
  • In the cell that the icon button is in, set the vertical alignment to “Middle.” (This is optional, but we find it helps control the button’s position.)
  • In the script pane, enter the JavaScript that you want executed when the button is clicked.

Icon KPIs

KPIs

A recognizable font symbol can make your KPIs easier to understand and more visible.  To add them:

  • Create a table with an aggregation.
  • Delete the detail and excess header/footer rows. You should only have the aggregation(s) that are part of the KPI.
  • Drag the labels to the table with the aggregation. You may want to use a grid or use other formatting techniques.
  • Cut and paste a font symbol into the label from the Font Awesome cheatsheet. In the label properties, select the symbol font, font color, size, etc., as you see in the image above.

Icon Columns in a Table

columns in table

If a column of a table contains data that can be easily represented by a font symbol, do the following:

  • Create a table with all the columns from the data set that you want
  • Create a new column for the font symbol
  • Drag a Data item from the palette to the new column; add a label to the column header if needed
  • In the data item properties tab, change the font to the symbol font family. Set the font size, color, etc. (We’ve set Male to red and Female to blue in our example table.)
  • In the JavaScript expression pane of the data item, cut and paste the JavaScript logic including the font graphic in quotes. For example:
if (dataSetRow["gender"] == ‘M’) { '•';  // Male graphic } else { '•';  // Female graphic }

 


Icons in Bar Charts

barcharts2

A font symbol can emphasize the meaning of a bar in a chart. To add them:

  • Create a bar chart with the charting wizard in iHub
  • Click on the fx Script pane in the Edit Chart dialog
  • Add a “beforeDrawDataPoint” script function
  • Add the JavaScript that includes the font symbol. For example:
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex) {   pointOptions.dataLabels = { enabled: true, useHTML: true,   formatter: function() {   returnStr = '<div style="text-align:center">';   switch(this.x) { case 'Cancelled': returnStr = returnStr + '<i class="fa fa-ban"></i>'; break; case 'Disputed': returnStr = returnStr + '<i class="fa fa-folder-open"></i>'; break; case 'In Process': returnStr = returnStr + '<i class="fa fa-car"></i>'; break; case 'On Hold': returnStr = returnStr + '<i class="fa fa-wrench""></i>'; break; default: returnStr = returnStr + '<i class="fa fa-star""></i>'; } returnStr = returnStr + '<br>' + this.y + ' %</div>'; return returnStr; }   }   },

This series of free Interactive Viewer extensions was created by BIRT engineers Clement Wong and Bill Clark.  Interactive Viewer is ideal for putting personalized iHub content in all users’ hands, and their goal with these extensions is to make it even better.

The next blog in this series will show how to add external web services to iHub Dashboards. Specifically, we will create an iHub gadget with the Disqus community discussion board. Using a Disqus gadget allows your users to add comments and annotations to the dashboard without any coding on your part.

Other blog posts in this series:
1. Extend Interactive Viewer with Row Highlighting

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

4. Extend iHub Dashboards with Disqus Discussion Boards

5. Extend iHub Interactive Viewer with Fast Filters

6. Extend Interactive Viewer with Table-Wide Search

 

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