Dashboards That Pop: Arcade Tips (Stop Repeating Yourself)
Repeating arcade in ArcGIS Dashboards is such an easy habit to get into, especially when you are relatively new to arcade and advanced formatting. Let's look at some strategies you can easily adopt to cut down on duplication of effort.
Scenario 1: Seeing Triple
It starts innocently enough; you create an arcade snippet to dynamically change the background color of a list based on a feature’s hazard level. Then you realize that some of the dynamic background colors make the font hard to read. So, you write an almost identical arcade snippet to change the text color based on a feature’s hazard level. Then you get an idea to add hazard-based icons. Now you have 3 arcade snippets that are nearly identical.
Next thing you know, you’re being told that the hazard categories are changing, so now you must edit your arcade in 3 different spots. It’s not the end of the world but it is time-consuming and annoying.
Solution: Arrays
ArcGIS Arcade Documentation (Array)
Arrays are comma separated values inside of square brackets. We can reference specific values by their order in the array. We always start counting on the left at 0.
We can create an array of colors:
var colors = ['HotPink', 'Black', 'LightSteelBlue']
To return the value of ‘Black’, we would just need to refer to our variable + the array position:
colors[1]
We can use this color array to populate different list elements, such as the text color, the background color, and separator color by specifying which array list order goes with which element.
var colors = ['HotPink', 'Black', 'LightSteelBlue']
return {
textColor: colors[1],
backgroundColor: colors[2],
separatorColor:colors[0],
selectionColor: '',
selectionTextColor: '',
// attributes: {
// attribute1: '',
// attribute2: ''
// }
}
Now that we know how arrays operate, we just need to add some arcade to make the array values dynamic. In our scenario, I had 3 different variations of this simple snippet that returns a value based on a feature’s hazard level. The only change I need to make to my original snippet is to change the returned value to an array of values.
var arrayHazards = When(
$datapoint.HAZARD_POTENTIAL == 'Significant',
['#990B0B', '#FFFFFF', '😱'],
$datapoint.HAZARD_POTENTIAL == 'Low',
['#570959', '#FFFFFF', '😀'],
$datapoint.HAZARD_POTENTIAL == 'High',
['#CC8579', '#000000', '😯'], ['#FFAA33', '#000000', '🤨'])
return {
textColor: arrayHazards[1],
backgroundColor: arrayHazards[0],
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
emoji:arrayHazards[2]
}
}
That’s it. It’s such a small change to how you write arcade, but it makes things so much easier for you.
💡 Tip: When creating your arrays it is important to be consistent with your ordering.
Scenario 2: Repetition, Repetition, Repetition
Sometimes you find yourself repeating the same logic over and over again but using different fields. A good example would be a table element with different test scores that you want to assign letter grades to.
Solution: User-Defined Functions
ArcGIS Arcade Documentation (User-Defined Functions)
When you create your own function, you are defining a block of statements to run whenever you invoke that function.
Let’s create a simple function called ‘welcome’.
function welcome () {
'Welcome!'
}
Whenever we use welcome() we are presented with a Welcome! Message.
To make it more dynamic we can add a parameter to the function. Think of parameters as placeholders in your arcade. Inside your function, you are stating how the parameter value should be used. In this example we are adding the parameter to the end of our welcome string. Since we established a parameter and not the actual value, we are free to change it up anytime we invoke welcome().
function welcome (name) {
'Welcome ' + name + '!'
}
In scenario 2, I had three basic arcade snippets that converted test scores into letter grades. I can easily turn those three snippets into a function with the test score as a parameter.
function grading (score) {
When(score >= 90, 'A',
score >= 80, 'B',
score >= 70, 'C',
score >= 60, 'D', 'F',)
}
return {
cells: {
user_name: {
displayText : $datapoint.user_name,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test1: {
displayText : grading($datapoint.test1),
textColor: '',
backgroundColor: '',
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test2: {
displayText : grading($datapoint.test2),
textColor: '',
backgroundColor: '',
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test3: {
displayText : grading($datapoint.test3),
textColor: '',
backgroundColor: '',
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
}
}
Bonus Tip: Combine the Two
What if we wanted to assign a letter grade and change the background color based on that grade? We can easily have our function return an array.
function grading (score) {
When(score >= 90, ['A', '#006D77', '#FFFFFF'],
score >= 80, ['B', '#83C5BE', '#000000'],
score >= 70, ['C', '#EDF6F9', '#000000'],
score >= 60, ['D', '#FFDDD2', '#000000'], ['F', '#E29578', '#000000'])
}
return {
cells: {
user_name: {
displayText : $datapoint.user_name,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test1: {
displayText : grading($datapoint.test1)[0],
textColor: grading($datapoint.test1)[2],
backgroundColor: grading($datapoint.test1)[1],
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test2: {
displayText : grading($datapoint.test2)[0],
textColor: grading($datapoint.test2)[2],
backgroundColor: grading($datapoint.test2)[1],
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
test3: {
displayText : grading($datapoint.test3)[0],
textColor: grading($datapoint.test3)[2],
backgroundColor: grading($datapoint.test3)[1],
textAlign: 'center',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
}
}
And just like that what could easily have been 36 lines of code is down to 6.
Check out the rest of the Dashboards That Pop series.
Happy Dashboarding.
