IBM Support

Map, Smart Text & Gauge Group - New Dashboard Widgets since JazzSM 1.1.1

Technical Blog Post


Abstract

Map, Smart Text & Gauge Group - New Dashboard Widgets since JazzSM 1.1.1

Body

IBM Jazz for Service Management (JazzSM) version 1.1.1 was released towards end of 2014. You would have already seen this blog post briefly explaining the release contents. Also please note that the release was later refreshed to include critical security vulnerability fixes (including SSLv3 POODLE). The refresh is available on IBM Fix Central, please update ASAP.

 

Apart from many enhancements and numerous defect fixes, there were also new Dashboard Widgets added in this release. In this blog, we will have a quick look at what these widgets offer.

 

1) Map Widget

Displaying a colorful map in the dashboard was always a top item in the wish list of many IBM customers. Map widget displays data from a dataset as markers on a geographical map in a very attractive and easy to comprehend form. Each marker on the map represents an item/row in the dataset. It supports multiple mapping providers like Google, Bing, OpenStreetMap and local Geo JSON files. Markers are interactive – you can hover for tooltip, click to select (send event/context to other widgets on the page or launch another page with context) and right click to see context menu etc. Data should include Latitude and Longitude information to geographically plot item markers correctly on Map.

image

 

Above image shows a page with 4 map widgets highlighting various features of the widget for easy comparison. They are:

  • Image 1 on top left shows the Open Street Maps (OSM) as mapping provider and a complex marker showing the resource type (comes from the dataset) and a status indicator coming from a dataset column of type 'status'
  • Image 2 on top right shows the Google map service provider and a simple marker showing status coming from a dataset column of type 'status'
  • Image 3 on bottom left shows how a map looks like with a local Geo JSON and a string column for marker status. Map widget provides this default marker and tries to derive the color from the values provided for the status column by looking for known values like info/warning/warning_major/error etc
  • Image 4 on the bottom right shows the Bing map service provider. This has a complex marker and the dataset provides the status as string along with the status image and resource image as URLs. This provides great versatility for 3rd party data integration via TDI or Impact. You can consider DASH myBox feature for housing these images.

You may have noticed a slider on top right corner of the widget that let you choose between Table vs Map. On sliding over to Table option, widget will show the same content in Map as a Table for accessibility users and tools, while providing some of the advanced features of Table like filtering, sorting etc.

Also note that Google and Bing users need to provide an API key in the Quick Edit configuration for those providers to work correctly. Though basic usage is usually free, you may have to pay them if your usage exceeds the allowed free quota and is tracked via the API key. Local Geo JSON files are best suited for offline maps and you can create/provide focused and custom maps (eg: just a country, state, city, building etc).

If you have any questions or would like more info please share via the comments section of this and we can have a more detailed blog on this widget later.

 

 

2) Smart Text
The Smart Text widget is an advanced version of the existing Text widget. Apart from what Text does, it can dynamically display values provided by a data provider, in an html template set by the user. It can be used in a number of ways, even as a dynamic label overlaying another widget. The displayed data can change in real time (without reloading) if the data provider supports dynamic updates. For more flexibility, you can also format values from the dataset.

image

TIP: To get rid of the title, help control etc and to save space as well as look better, change the skin of the widget to "Transparent no title"

 

As shown above, the widget is extremely versatile and powerful. The Quick Edit mode provides a handy editor using which I have created a Table with the property/column names typed into the first column of the table. The data in the second column is dynamic and comes from the dataset. There is also a pagination control (1/10+ >) which when enabled allow users to traverse through all the items in the dataset, one by one.

image

Above image shows the Quick Edit view of the previous Smart Text. There is a quite mighty editor on the left to create awesome templates and you can just select to insert at cursor position or type in this format for a dynamic field - ${COLUMN_ID}. The filterable list on right is in the format - ColumnName(ColumnId):ColumnType.

Smart Text also supports advanced formatting options via the formatTag option. As you can see, the DATE and FLOAT columns were formatted via a pattern to make it more legible for the dashboard users. To show the status as an image (only supported for 'status' type columns), you need to do the following:

<img alt="status icon" src='${STATUS%{"formatTag":"dashStatus","selector":"imageUrl"}}' style="width:32px;height:32px;" />  - where STATUS is the column_id for a column of type 'status'

NOTE:

1) You cannot enter html markup directly into the editor as it is already rendering html and your markup will be escaped. You should switch to 'View HTML Source' mode via the toolbar button/icon

image

2) If you are creating a fancy visualization the html could become complex easily. So be very careful, recommend copying the template to an external file as well as saving the page occasionally when you are "developing" so that in case something goes wrong you don't lose everything. Watch for syntax, especially opening/closing commas and braces.

 

 


3) Gauge Group
Gauge Group is a container/layout/aggregation widget which can group multiple gauge widgets (Analog Gauge, Status Gauge, Value Status Gauge and Volume Bar) into one. All the widgets in the group will share the dataset instance and represent different attributes/columns of the same item/row. The main advantages are handling it as a single block/widget for positioning and network optimization from consolidating multiple dataset connections to just one. Since it visually represents a single row from the dataset, clicking on any of the child widget sends the same context.
 

image

In the example above, the 8 gauge widgets could be brought down to just 2 units, and only 2 connections are required to the server. This immensely reduces the server load and improves loading performance for complex pages with multiple gauges, especially in large displays of 24x7 monitoring centers. You can control the layout (eg: no: of columns) and add row separators etc via the options in Quick Edit.

 

[{"Business Unit":{"code":"BU050","label":"BU NOT IDENTIFIED"},"Product":{"code":"SSHPN2","label":"Tivoli"},"Component":"","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"","Edition":"","Line of Business":{"code":"","label":""}}]

UID

ibm11276072