Mia Shukri|November 26, 2020

Video Transcript

Hi, and welcome back to the Corona Learning Series. I’m Diego Cordero, BI Lead and Data Strategist at Profusion. Today, we will be looking at Sisense BloX, and specifically, how to create a chevron process using HTML.

BloX and HTML can help you white label your dashboard, you can create custom widgets with leocode which wouldn’t be available out of the BloX. You can add CSS styling to your dashboard or to the BloX/Elements you’re creating and you can add a smart graphic element, which is what we will be creating today, a smart graphic element that you can add data to.

Lets just jump right into the demo.

First of all, I’ll show you this HTML file that I created, it’s a very simple HTML with 4 div elements in the body, and they have 2 elements in each. It has css style here and I’ve minified everything so that we can copy and paste them into BloX. As you can see, we don’t need the container, because BloX already has it and I’m going to delete these margins as well as we don’t need it. Now let me show you what this looks like, this is what we want to replicate on BloX:

So now let’s go ahead and copy and paste these elements into BloX. This is our recruitment demo dashboard, with a fake recruitment agency. It shows how many candidates they have, the average days to recruitment and many other KPIs that are useful for a recruitment agent.

Now let’s go ahead and add 1 BloX widget through ‘Advanced Configuration’, were going to BloX here and going to get rid of the default styling, the default text, and the default background, which is yellow and we’re going to do white.

Now we have a container and a text block, but what we need is a column so, we change this to ‘ColumnSet’  and change this to ‘columns’, we’re going to copy and paste this, and that we change to column and items, and a text block.

Here you can see, I’ve already rendered something, and here is where we are going to copy and paste our first element, and you can see the text there, and now we’re going to copy and paste the style at the top.

So, here we have the style and you can see that it’s rendered our first element, but as you can see, it should be 25% and we have already seen this class here. So, we can go ahead and add that class. When we copy and paste the different columns, you will see that it works.

Now if I change the configurations in editor you can see that the spaces in the tabs have been sorted out for the next blocks, it’s that smart.

So, we can copy and paste the different columns and then go back to our code, copy and paste in its corresponding text element. There’s 1, 2 and 3 so now we have 4. Now we need to add data to them.

Here, we’re going to add talent search, let’s name that talent. We’re going to add screening and shortlisting and call that screening and add interviewing as a value and we can change that name to interviews. I’m changing the names so that it’s easier to read on BloX.

Now we’re going to look for all the number elements here and we can change them so this to show the data you need to add curly brackets and panel which is one of these (values) and then the name of the panel and you can now see the number there.

Then we can just copy and paste that and then change it, so here we have offer, interview and screening. I’m going to apply, and now we have our BloX element here which I’m going to drag up and paste here and that’s it!

Next up we will be creating this custom bar chart, thank you.

Sign up to our newsletter

Want to make life easier by staying on top of market trends?