Dashboards That Pop: Advanced Formatting Troubleshooting
Arcade and HTML go together like peanut butter and jelly. Sure, you can have one without the other, but to really jazz up your ArcGIS Dashboard, you really need both. 
💡 The above images all come from sample Dashboards put together by the product team. I frequently browse their content looking for inspiration. If you copy their Dashboards, you can open them up to see how they made them and borrow their Arcade/HTML.
When building Dashboards like these, your Arcade and HTML get interwound. You may have HTML that uses an Arcade expression....
<img src="https://flagcdn.com/28x21/us-{expression/flg}.png" alt="{field/STATE}">
Or Arcade that creates HTML....
var chargeCodeHTML = `<table><thead><th>Charge Codes</th></thead><tbody>`
Or Arcade that creates HTML that references another Arcade expression.
var tcolor = = When(ChargeCode == 3024, "#e2b9a7",
ChargeCode == 3025 , "#cfb8be",
ChargeCode == 3026 , "#874f81",
ChargeCode == 3027 , "#b6504a","#404040")
var bullet1Text = '<a href="' + $datapoint.AGENCYURL + '" target="_blank" style="color:' + tcolor + '">More Info</a>',
So what do you do when something goes wrong?
I’ve noticed that quite a few people jump to the conclusion that the problem is with X or Y doesn’t work and then exhaust themselves trying to fix a problem that might not even be the actual problem.
My broken list could be the result of:
- Arcade syntax error
- Arcade logic error
- HTML syntax error
- unsupported HTML
- Bad data assumptions on my part
- Unexpected/unaccounted for data values
- Data changes
- Dashboard bug
- All/many of the above
That can feel completely overwhelming, especially when you are new to Dashboards, Arcade, or HTML. Where do you even begin with troubleshooting? Today I’m going to walk you through how I troubleshoot my "fancy element” issues. The whole name of the troubleshooting game is to narrow down the potential causes as quickly as possible.
Issues to fix:
- Flag images do not display.
- Event type icons do not display.
- Colored ‘tags’ do not display.
Tip 1: Hardcode It
I have a bunch of HTML that includes dynamic fields, such as my flag image URL that contains the state name in the URL.
<img src="https://flagcdn.com/28x21/us-{field/STATE}.png">
Is the issue with my HTML or with the dynamic fields? If I remove the dynamic fields and it displays how I expect it to, I know the issue can be narrowed down to those fields, but if it still doesn’t work then I know I need to take a harder look at my HTML.
<div style="display:flex;gap:5px;justify-content:flex-start;">
<div style="align-self:center;">
<img src="https://flagcdn.com/28x21/us-ca.png">
</div>
<div style="align-self:center;">
<p>
<span style="font-size:18px;"><strong>{field/CZ_NAME}</strong></span>
</p>
</div>
</div>
<p>
</p>
<p>
{field/EVENT_NARRATIVE}
</p>
<p>
</p>
<div style="align-content:center;background-color:#ee716E21;border-radius:25px;border:2px solid #ee716E;display:flex;justify-content:center;width:150px;">
<div style="align-self:center;padding-top:2px;">
<sv xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFFFFF" viewBox="0 0 256 256"><path d="M184,184a32,32,0,0,1-32,32c-13.7,0-26.95-8.93-31.5-21.22a8,8,0,0,1,15-5.56C137.74,195.27,145,200,152,200a16,16,0,0,0,0-32H40a8,8,0,0,1,0-16H152A32,32,0,0,1,184,184Zm-64-80a32,32,0,0,0,0-64c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C105.74,60.73,113,56,120,56a16,16,0,0,1,0,32H24a8,8,0,0,0,0,16Zm88-32c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C193.74,92.73,201,88,208,88a16,16,0,0,1,0,32H32a8,8,0,0,0,0,16H208a32,32,0,0,0,0-64Z"/></svg>
</div>
<div style="align-self:center;">
<p style="color:white;font-size:16px;">
<strong>{field/EVENT_TYPE}</strong>
</p>
</div>
</div>
So, my flags and colored tags are working, I now know I need to investigate those dynamic fields. However, my icon is not displaying so I could have an issue with my icon HTML or maybe it is a Dashboard issue.
Tip 2: Display It
When we pull our dynamic fields directly into the HTML, we can’t really see what is going on. I like to pull these fields out of the HTML and directly into the Rich Text Editor so I can see exactly what is and isn’t being populated. If the dynamic field is the result of an Arcade expression, I like to include the data field(s) used in that expression so I can see if it is being calculated as I expect. I will also include my hardcoded URL so I can compare the two to see where any differences may be.
Hardcoded URL: https://flagcdn.com/28x21/us-ca.png
Dynamic URL: https://flagcdn.com/28x21/us-{field/STATE}.png
Event Type: {field/EVENT_TYPE}
Event Type Color: {expression/clr}
The first thing that I noticed is that my image links are very different. I'm pulling the flag images from flagpedia.net and they use the state abbreviations in the image URLs. My state field in the data uses the full state name which is why my dynamic images are probably not working.
Moving on to my dynamic colors, I can see that they are populating with a color value. However, the High Wind color is not correct. It is displaying the default color value (ffffff) not the High Wind color value (ee716e). Comparing my Arcade expression to the returned Event Types I can see what the issue is. My expression is looking for ‘High wind’ when the actual value is ‘High Wind’.
Let's try and get the images and colors working. I used some Arcade to correctly populate my image URL and fixed my color expression.
var state = $datapoint.STATE
var flg = Decode(state, 'CALIFORNIA', 'ca', 'ARIZONA', 'az', 'NEVADA', 'nv', 'UTAH', 'ut', '')
var clr = Decode(weath, 'Lightning', 'f2dea2',
'High Wind', 'ee716E',
'Strong Wind', '70a800',
'Heavy Snow', '004c73', 'ffffff')
****************
<div style="display:flex;gap:5px;justify-content:flex-start;">
<div style="align-self:center;">
<img src="https://flagcdn.com/28x21/us-{expression/flg}.png">
</div>
<div style="align-self:center;">
<p>
<span style="font-size:18px;"><strong>{field/CZ_NAME}</strong></span>
</p>
</div>
</div>
<p>
</p>
<p>
{field/EVENT_NARRATIVE}
</p>
<p>
</p>
<div style="align-content:center;background-color:{expression/clr}21;border-radius:25px;border:2px solid {expression/clr};display:flex;justify-content:center;width:150px;">
<div style="align-self:center;padding-top:2px;">
{expression/icon}
</div>
<div style="align-self:center;">
<p style="color:white;font-size:16px;">
<strong>{field/EVENT_TYPE}</strong>
</p>
</div>
</div>
My flag images are now working but my colored tags still are not despite my Arcade working correctly. I still have the icon mystery to solve as well.
Issues:
- Flag images do not display. ✅
- Event type icons do not display.
- Colored ‘tags’ do not display.
Tip 3: Take it out of the Dashboard
At this point we have icons that won’t display when hardcoded or dynamic and we have colored tags that will display when hardcoded but not dynamic despite the dynamic values working correctly. My next step is to see if my HTML works outside of the Dashboard or if it is specifically a Dashboard issue. Since I am getting conflicting results with my colored tags, I will have Dashboard display my dynamic HTML so I can grab the exact HTML being used. To do this, I am going to go into the List Source, select everything and cut it. Then I will get out of the Source mode and paste it into the rich text editor.
Now we can see the HTML with the dynamic fields populated.
Next I will copy the HTML from one of the records and then paste it into an online HTML editor (codepen.io).
Same result. Now I know I need to take a closer look at my HTML. I’ll start by focusing on the colored tags, specifically where the color values are entered as the tags worked when hardcoded.
I can see that my color values are being populated as expected, I also see that when adding the hex values for my colors to my Arcade expression, I neglected to add the #.
Issues:
- Flag images do not display. ✅
- Event type icons do not display.
- Colored ‘tags’ do not display. ✅
That just leaves my icons.
Taking a closer look at the HTML in the editor and I can see that my svg code is not present. Dashboards will strip out unsupported HTML tags which is what appears to be happening here. Except, I know I've used svgs in the past. This could either be a change to Dashboards or there is something incorrect in my svg code that makes Dashboards think it is unsupported.
I’ll copy the svg code directly from my Arcade and paste it into the online HTML editor.
💡 Be mindful of the colors in your HTML. My Dashboard has a dark background, so my svgs are white, but in codepen the background is white, so I need to change my svg colors so I can see them on top of the white background.
They are still not working so it must be something with the actual code snippet. My one clue is that Dashboards filtered out the tags, likely because it felt they were ‘unsupported’. Therefore, I will start with the tags to make sure they look alright. There's a lot going on in the svg snippets. If I don’t see something jump out at me, I would probably just go back to wherever I got the svg snippets from and try a fresh copy/paste. Luckily, I do see what the issue is. Our svg tag is incorrect. It should be <svg and instead it is <sv. No wonder Dashboard didn’t know what to do with it.
Now I can go back to my Dashboard and fix the issues with my colors and icons.
Issues:
- Flag images do not display. ✅
- Event type icons do not display. ✅
- Colored ‘tags’ do not display. ✅
Bonus Tip: Copy It
As you can see, I tend to do a lot of experimentation when troubleshooting. I always do this experimentation in a copy of the element that is not working. That way, once I know what the issue is, i can go in and fix it instead of having to recreate it. I may even copy my Arcade and HTML into a text file just in case.
Happy Dashboarding!
