Dashboards That Pop: Arcade Tips (HTML-Arcade Mash Ups)
HTML can really add some pizzazz to your ArcGIS Dashboards. However, adding Arcade into the mix really allows you to turn it up even more, creating dynamic designs based on your data. This mash-up of Arcade and HTML (which I am now calling HTMLade) can create some lengthy and complex code. Here are some of my favorite HTMLade tips to keep things manageable.
Return HTML
While you can add your HTML to the template field and then reference a returned Arcade value within that HTML, it is so much easier to have the Arcade return the HTML. This keeps everything in one place (the advanced formatting section) as opposed to split up between the template and advanced formatting sections.
Inevitably, you will find yourself having to make updates after not looking at it for 6+ months. Not only will it be easier to make updates in one place, but it will be much easier for you to figure out what exactly you were doing in the first place. Nobody (including future you) wants to jump between reading code in two separate areas to determine what that code is doing.
vs.
Use More Variables
As your designs get more complex, you will find that your HTML contains more and more attributes. Take this hyperlink that looks like a button:
var button = `<a style="background-color: #f44336;
color: #FFFFFF;width: 100px;padding:5px;border-radius:50px;
box-shadow:0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 4px 0
rgba(0,0,0,0.19);display:inline-block; text-align:center;
text-decoration:none;" href="${url}">Button</a>`It contains all sorts of attributes such as:
- background-color
- color
- width
- padding
- border-radius
- box-shadow
I sometimes like to break out these attributes and create variables for them.
// Set URL (Can also be a field in your data.)
var url = 'https://esri.com'
// set hyperlink text
var htext = 'Button'
// Set Button Color
var btncolor = '#f44336'
var bcolor = ` background-color: ${btncolor};`
// Set Button Text Color
var txtcolor = '#FFFFFF'
var tcolor = ` color: ${txtcolor};`
// Set Button Padding
var pad = 'padding:5px;'
//set button width
var sze = 'width: 100px;'
// Set Button Radius - Set to 0px if you want square buttons
var rad = 'border-radius:50px;'
// Set Dropshadow - Set to '' if you do not want a dropshadow
var shdw = 'box-shadow:0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.19);'
// set gradient
var gcolor1 = '#5B3758'
var gcolor2 = '#F9627D'
var grad = `background-image: linear-gradient(90deg, ${gcolor1} 0%, ${gcolor2} 100%);`
// set background type - use grad for gradient background or bcolor for solid color
var bckgrd = bcolor
// assemble button
var button = `<a style="${bckgrd} ${tcolor} ${sze} ${pad} ${rad} ${shdw} display:inline-block; text-align:center;text-decoration:none;" href="${url}">${htext}</a>`Now if I need to tweak my button design, I can easily find that portion to adjust. I don’t have to read through a ton of HTML to find a specific attribute. I can also easily reuse this button arcade across different dashboards while making quick design changes. Finally, I can share this snippet with colleagues who might not be as familiar with Arcade and HTML and know that they can easily change the look and feel of it as needed.
It can be a bit more work to set up if you have a lot of attributes, but worth it in the long run if you think you might be making lots of minor adjustments in the future or it is something you can reuse.
Template Literals
Using backticks instead of quotes or double quotes makes your HTML life easier.
With backticks your arcade can span multiple lines, which is super nice when you have long HTML segments. You can also reference variables and fields directly if you use ${} (${variable}). No more having to chain strings, plus icons, and variables/fields. This makes your code easier to read and understand.
// assemble button
var button = Concatenate('<a style="' + bckgrd + tcolor + sze + pad + rad + shdw + 'display:inline-block; text-align:center;text-decoration:none;" href="' + url + '">' + htext + '</a>')
// assemble button with template literals
var button = `<a style="${bckgrd} ${tcolor} ${sze} ${pad} ${rad} ${shdw}
display:inline-block; text-align:center;text-decoration:none;"
href="${url}">${htext}</a>`
Happy Dashboarding!
