nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dashboard Status Icons

MichaelNixon-Garrison

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!

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

JacobMark2

I think this was made using an Arcade (advanced formatting) expression. I am also hoping to make the same thing some point soon for monitoring project status. I will post here if I figure it out. Otherwise, I'll watch this space too for a solution!

JA7

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%">&nbsp;</td>
			<td style="background-color:{expression/e2}; width:25%">&nbsp;</td>
			<td style="background-color:{expression/e3}; width:25%">&nbsp;</td>
			<td style="background-color:{expression/e4}; width:25%">&nbsp;</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>

Screenshot 2022-08-23 145226.png

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.

MichaelNixon-Garrison

Appreciate it!

MichaelNixon-Garrison

Appreciate it! This is very helpful. Does Arcade need to be downloaded? I'm relatively new to making dashboards.

JA7

Arcade is a part of dashboards in ArcGIS Online and in Enterprise 10.9.1 and newer.

Advanced Formatting in Lists
Pushing the limits of Arcade in dashboards

MichaelNixon-Garrison

Perfect - thanks!

MichaelNixon-Garrison

I tried using this, but I've been running into issues implementing it. Is it possible to schedule a call to walkthrough?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.