Dashboard Status Icons
Hello everyone,
I’m working on a capital project dashboard and I’m trying to find out whether or not we’re able to duplicate this project status icon, like the one shown on Charlotte (NC)’s CIP dashboard. I know we can add different statistical charts/graphs to dashboards but I am unsure how to add one for each project.
Any help is greatly appreciated. Thanks in advance!
You can create that with a combination of HTML and Arcade in a list element. First you would need to use the list advanced formatting option to dynamically change the color based upon a status. You will need an expression for each colored box.
var e1 = When(DomainName($datapoint,"EVENT_TYPE") == 'Event 1', '#4E9F3D', '#808080')
var e2 = When(DomainName($datapoint,"EVENT_TYPE") == 'Event 2', '#4E9F3D', '#808080')
var e3 = When(DomainName($datapoint,"EVENT_TYPE") == 'Event 3', '#4E9F3D', '#808080')
var e4 = When(DomainName($datapoint,"EVENT_TYPE") == 'Event 4', '#4E9F3D', '#808080')
return {
textColor: '',
backgroundColor: '',
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
e1: e1,
e2: e2,
e3: e3,
e4: e4
}
}
Then use the source code button to include your HTML that will create the colored boxes. Essentially, it is a table with different colored background cells. Each colored cell will have a background color. This is where you will call your Arcade expressions from before.
<table style="border-collapse:separate; border-spacing:2px 4px; margin:0px -2px; max-width:500px; table-layout:fixed; width:100%">
<tbody>
<tr>
<td style="background-color:{expression/e1}; width:25%"> </td>
<td style="background-color:{expression/e2}; width:25%"> </td>
<td style="background-color:{expression/e3}; width:25%"> </td>
<td style="background-color:{expression/e4}; width:25%"> </td>
</tr>
<tr>
<td style="text-align:center; width:25%"><strong>Event 1</strong></td>
<td style="text-align:center; width:25%"><strong>Event 2</strong></td>
<td style="text-align:center; width:25%"><strong>Event 3</strong></td>
<td style="text-align:center; width:25%"><strong>Event 4</strong></td>
</tr>
</tbody>
</table>
If you see something in a dashboard someone else has made and are curious how they made it, I would recommend creating a copy of their dashboard so you can see how they configured it. I use this trick all the time. Here's how to make those copies.
