Wednesday, October 19, 2016

UF Dashbuilder - Custom metric displayers

A common feature users usually ask for is the ability to customize the look&feel of their metric displayers. In order to cope with those kind of scenarios, UF Dashbuilder provides an editor which allows for the edition and customization of the metric HTML code. The perspective editor's Displayer Component is in charge of providing such functionality.  In order to start the edition process just drag & drop a Displayer Component from the component sidebar on the right:

Once opened, select the Metric type from the types on the left. The system provides four predefined templates. On the center of the screen, a preview of the metric is shown along with the HTML and Javascript options, both give access to the metric's source code.

From the HTML tab, it is possible to provide a custom template using the HTML language. Some metric related variables can be injected in the template as well just by clicking on the upper right icon and selecting from the list of available variables.  Also both Bootstrap 3 and PatternFly  are supported for CSS styling.

From the Javascript tab users can provide a JS snippet which is executed every time the metric is displayed. Likewise the HTML tab, it is possible to reference some context variables as well as DOM elements from the HTML template. Altogether it allows for the implementation of nice features like for example: changing the color of the metric if its value exceeds a given threshold, apply a custom format to the value, etc.

The next video (do not forget to select HD) shows how to create and customize a new metric using the features described above. Enjoy!