How to create your own dynamic widget in your dashboards

It’s impossible to have a library of pre-defined widgets with all combinations of KPIs and designs/layouts. There are too many possibilities. For example, in the widget above, you may want to add a comparison of the current revenue to a target, a comparison to Year-2, a predictive value of the revenue at the end of the current quarter…

The Serenytics approach is to let you edit the widgets code to create a component that will bring the exact insights you want.

In this tutorial, we’ll create the widget above that shows:

• revenue in the current quarter
• comparison to previous quarter revenue
• comparison to last year quarter revenue

Create the KPI queries

In the data-source, create three value formulas:

• sum_if([price], [date] in quarter(0))
• sum_if([price], [date] in quarter(-1))
• sum_if([price], [date] in quarter(-4))

The first one computes the revenue (i.e. the sum of the price column) where date is in the current quarter (obtained by quarter(0) ). The second one computes the last quarter revenue. The last one computes the revenue for the same quarter, last year.

Create the widget

In a dashboard, start by creating a KPI widget showing these three formulas:

In the widget data properties, add the three formulas you just created:

To customize this widget in HTML, in the rendering mode, choose the template custom HTML:

Here we are, in the left menu, you have access to the HTML code of your widget. Before writing HTML, you must know how to get the data in the code, using our interpreter.

A short introduction to the Serenytics interpreter

In the widget HTML, all the code between double curly brace will be interpreted by our engine before being rendered.

In the interpreter, valueN is the Nth value configured in the Data tab for this widget. In our example, value1 is the revenue in the current month.

All the Serenytics front-end functions (see the doc here) are also available in the double accolades.

You can use it to display a text according to values:

{{value1 > value2 ? "Congrats!" : "Try again." }}

You can use formulas to show and repeat icons (from the FontAwesome library).

{{value1 > 100 ? repeat(icon("flag", "red), 3) : "" }}

You can select a CSS class or another depending on the data values:

<i class='fa fa-thumbs-{{value1>10 ? "up" : "down"}}'></i>

You can use it to show/hide a div according to the values:

<div style=display:{{value1>10 ? "inline":"none"}}> Congrats </div>

This opens a lot of possibilities for your widgets.

Back to the creation of our widget

Let’s edit the widget with the three values configured above to get this result:

The HTML is provided below. And we also need the CSS code (provided right below the HTML code). To enter a CSS code in Serenytics, use the design tab:

Here is the HTML and CSS code for the created widget:

If you had selected the three formulas provided above and copy-pasted these two codes (HTML and CSS) in your widget, you now have created your first widget. Congratulations!

I usually find that the most difficult part in the process is creating the widget layout. My advice is to create the layout first. Create each div with a clean class name, add a dummy text and a background-color to each one. Then use flex to precisely configure your layout (here is a good flex doc). And only once you’re done with the layout, add the content and its design.

And remember that if you’re not a designer, the best way to obtain a good design is to get inspiration from an existing one. When you see a nice widget on a website, keep the link. When you need to create one, use the dev tools of your navigator to inspect the HTML and the CSS and then use Serenytics to achieve your own design.

If you have any question/feedback, please contact me. And let me know if you struggle with your widget, we can help.

And a final word about our roadmap. We plan to add a library of such widget templates. A widget will be defined by its HTML code and its CSS code. You will be able to instantiate a widget from this library and to modify its code to customize it. And you’ll have the possibility to define your own widgets in the library.