Dashboards That Pop: HTML
Incorporating HTML into your ArcGIS Dashboards is a great way to create a unique dashboard that stands out from the crowd. Not great at HTML? That’s ok. Neither am I! Keep reading for my super handy HTML tools and tricks.
HTML can be added anywhere you see the source button:
- List Elements
- Rich Text Elements
- Title for all Elements (excluding selectors)
- Description for all Elements (excluding selectors)
- Details Element (via map viewer)
Let’s start with a basic dashboard that is using USACE’s National Dam Inventory layer, which is available in the Living Atlas.
Now let’s see a version of that dashboard that has been HTML-ified.
This dashboard features HTML in the list, a details element, and in the description portion of an indicator. The colors are dynamic and are being pulled from Arcade snippets.
Getting Started with HTML
I know HTML can be a bit intimidating if you are not used to working with it but have no fear, I have some tricks and tools to make HTML easy.
This Online HTML editor is 100% the secret to my fancy lists. I do not write my own HTML. Instead, I use the rich text editor on the left to create my design and then copy the associated HTML from the left into my dashboards and pop-ups.
Tip: When I am going to be adding dynamic colors via Arcade, I add a random color into the HTML builder. That way I can see where the colors will go and get the syntax built out. Then I simply switch out the hex code for my Arcade expression.
My other trick is to think in terms of tables. All my dashboard HTML designs are tables. This makes it easy to position components. Merging cells and adjusting the height and width of cells, columns, and rows opens up a lot of layout possibilities. Keep in mind that cells can have a variety of purposes. They can hold text, or simply be a way to display a background color or border color. Some can even be completely blank but are used to add space to your design.
Let’s look at some examples.
It doesn’t all have to be in a single table either. Breaking it up into two tables can make it easier to design.
Sometimes your designs will require you to break up your tables. Here we are using a list to create a ‘table’ in an ArcGIS Enterprise dashboard that doesn’t yet have access to the table element.
If you try to include your header row in your list table it will be repeated for every feature in your list.
To get the look we want, we need two tables. One in the list for the data, and a second in the Title section for the header. To ensure the header lines up with the data, use consistent column widths in both tables.
Splitting up your tables can open the door for some creativity. For my indicator I decided to have a little fun. I was shocked that there were dams built in the 1600s and wanted to highlight that a bit. I used some HTML and Arcade in the description section to make a little timeline bar. The newer the dam, the closer the bar reaches to 2022.
I used some Arcade statements to determine the percentage of time that has passed since 1640 (the earliest dam) to each individual damn completion year. I then used HTML to create a one cell table. I added a background fill to that cell and set my table width to my arcade percentage.
Underneath that table I added a second 2x1 table. It needed to be a separate table so that the width of the table (and therefore the year benchmarks) would not change. The first cell has our starting year, the second has this year (right justified).
HTML Tools
WYSIWYG editor that does all the hard work of creating the HTML for you.
Simple and focused HTML guides and tutorials.
Use these codes to add a bit of transparency to your colors. You will want to add the transparency codes to the end of your hex color and not to the beginning like the page says. Additionally, the percentages shown are not the transparency percentage, but the amount of color displayed. 100% in the list is full color and 0% is fully transparent.
Happy Dashboarding!