Dossier Grid Styling Tips - MSTR Dossier

Hello Friends,

When it comes to styling the #Dossier #Grid it becomes challenging and I like challenges. 

Today will discuss some of the #tips & #trick to style the grid to fulfill some UI requirements, like below.

In the above screenshot, we can see the left bottom grid is having some details of the providers in a good presentable UI view. Which contain star rating and other KPI details in a single row but stacked to each other.

So, to achieve the above grid structure you have to follow the below steps:

1. Create a dummy dataset that has one column and it contains only one value i.e '<br>'.

2. And make that column data type "HTML".

3. Now create a derived metric using the attribute from the dummy dataset.

        i.e Max([New Line]@ID){~+}

4. Create a derived metric for star rating based on some KPI:

i.e Case((Quality=1), "⭐", (Quality=2), "⭐⭐", (Quality=3), "⭐⭐⭐", (Quality=4), "⭐⭐⭐⭐", (Quality=5), "⭐⭐⭐⭐⭐", 0)

You can get unicode symbols from any available links for example: http://xahlee.info/comp/unicode_index.html

5. Create a derived metric on the main dataset where your KPI's are available for stacked KPI details:

Here will use the Contact function to contact all the information which we want to display in a single cell but it will also include a newline HTML tag metric (i.e </br>)

i.e 

Concat("Facility Score  ", Round([Final Facility Score]), [New Line Metric], Round(Distance), " miles away", [New Line Metric], Stars_Rating_Quality, [New Line Metric], $_Cost)

6. You have created all the required metrics. Now you just have to place the attribute in a row and the above "Provider_Grid_Detail" metric in a column.

And that's it, you will get a good presentable grid.

I hope it will help you in your any similar kind of requirement.

Additional notable feature: You have also noticed that in Map I have used some custom icons. If you want to know how we can use that then let me know.