Make Your Dashboards Stand Out with Sisense BloX

[Debora_C]

With Sisense BloX, you can turn your data into appealing analytic apps. This framework empowers developers to create their own analytic applications that can be placed anywhere. Sisense BloX’s interface uses basic CSS and JSON, so you can access APIs in a low-code environment. In BloX, it’s easy to add text, images, and even video to your dashboards. 

UK-based Profusion is a Sisense partner that specialises in predictive modelling, email marketing, business intelligence and customer satisfaction. Diego Cordero, BI lead and data strategist at Profusion, has recorded some helpful tutorials that will walk you through how to build different features using Sisense BloX.

Sisense Blox Explained

Sisense Blox is an official add-on and can be found on the Sisense Marketplace, along with many other add-ons, some provided by partners. You can use BloX to populate dashboards with different sets of data. In the following illustrative yet entertaining video, Diego shows how to use Blox to create a dashboard that displays Spotify data. You’ll also learn how to set up custom headers, indicators to display top artist and track data, and traditional graphs on user data. The out-of-the-box snippets feature makes it easy to add an image, and adding a click button is done in seconds with the “actions” feature.

Video Link: https://www.youtube.com/watch?v=gyM_bXmIxbk

 

How to create custom actions

Next, Diego demonstrates more ways to use add-ons to enhance your Sisense Blox. The example he uses is a demo dashboard of all the pubs in the United Kingdom. It shows us the total number of pubs, the average number of pubs per local authority, and the average customer rating. There’s also a map displaying live density, and various bar charts (pubs per person, persons per pub). You can use the Sisense BloX widget to add a Google maps feature that shows directions from the user’s current location.

Video Link: https://www.youtube.com/watch?v=B_N6bY1RT4c

 

Custom bar charts

Building a basic bar chart in Sisense BloX is easy: You can find that code here. You can find the video transcript on profusion.com.

To make this custom bar chart into a progress tracker, we’ll be translating an HTML code into a BloX template. The text block is a tooltip that shows the value in a bar chart, category, and the bar itself. You can add styles in many different ways in the BloX framework. A style can affect the whole dashboard or be applied to just one chart, using the style tag. You can also use HTML in each element to define the appearance of text and design elements. 

 

Currency conversion switch

Here’s Diego on how to build a currency conversion switch for your dashboard. Using a data model with a currency table, you add currency rates to the formulae (you can do this in Google sheets), and a filter for the unique currency names column. You can modify the BloX switch template and edit it with your own custom javascript code.

This process uses Javascript to change the filter, change the symbol in your chart, and refresh the widget. “It looks very complicated, but it’s not actually that complex,” says Diego.

This trick will give you a cool toggle switch that you can use on your dashboard to allow you to change currencies effortlessly. You can adjust the look of your toggle switch, make it round or square, and define the box shadow, gradient, hover properties, and the transition in HTML. 

Video Link: https://youtu.be/w8fGozSyr74

 

Chevron process

In the fifth and final video tutorial, Diego demonstrates how to build a chevron process for your dashboard using HTML and Sisense BloX. A chevron process is a type of flow diagram where the steps are represented by linear arrows (chevrons). The recruitment dashboard in the demo for a (fake) recruiting agency shows KPIs like the number of candidates, average days to recruitment, and more. Diego demonstrates an advanced configuration that will insert a progressive chevron process that displays the number of candidates currently in the status of talent search, screening and shortlisting, interviewing, and offering. 

Video Link: https://www.youtube.com/watch?v=G2K1SIJk36Q

For all these demos, you can find the code used and video transcripts by watching the videos through the links in this blog. This will set you up with everything you need to white-label your dashboard, create custom widgets, adjust CSS styles, and create a smart graphic element.

Questions? Drop them in the comments below.