Using Arcade expressions in your ArcGIS Online pop-ups

When styling a pop-up in your ArcGIS Online map, you may want to customize the attributes that are available for your pop-ups. This post will show you how to use Arcade expressions for the following:

1. Check a feature attribute value and return a new attribute value depending on what it finds.
2. Construct a new, dynamic attribute like a URL using the existing attribute values.
3. Parse values out of long attribute strings.

In the following examples, I’ll be using the feature layer available here, which you can use to follow along with. To get started, create a new web map, and add the feature layer. Click “More Options” and enable pop-ups if they aren’t already enabled (they should be by default). Open the table to familiarize yourself with the data. Finally, click ‘Configure Pop-up’ to get started with the examples below. For all of these examples, switch the ‘Display’ attribute to ‘A Custom Attribute Display’.

1. Using ‘When’ to return a new attribute value (easier)

The first case we’ll look at is returning a new value depending on an existing value. A common application of this happens when there is a null value.

The first road closure in the demo dataset is on Montrose Street in Winnipeg, MB. The Incident Name is blank, and I’d like the pop-up to say ‘Unknown’ instead.

1. Under ‘Attribute Expressions’, click ‘Add’ to start a new expression.
2. A box will pop-up that says ‘Custom’ at the top and has an area for text below it. Click the edit icon next to ‘Custom’, and change it to a meaningful name like ‘Updated Incident Name’.
3. Enter the following code into the box. A detailed explanation follows:

var incidentName = $feature.INCIDENTNM;
var newName = When(
    incidentName == Null, 'Unknown',
    incidentName);
return newName; 

Line 1: This will retrieve the existing value of the Incident Name.

Line 2: This starts the 'When' test. The script will check each statement until it gets a match.

Line 3: If the Incident Name is null, assign 'Unknown' to the variable new_name.

Line 4: This assigns a value if the previous statement isn't satisfied. So, if it isn't null, keep the original Incident Name.

Line 5: This is the final line of the script, and it reports back the value for the new field you made.

4. Click ‘OK’. You should see a new value in the box under ‘Attribute Expressions’. Notice that it shows the name that you entered to replace ‘Custom’, followed by something like ‘{expression/expr0}’. You’ll need that second value.
5. To display the new value in your pop-up, click ‘CONFIGURE’ under Pop-up Contents.
6. In the box, add Incident Name: {expression/expr0}, and click ‘OK’ in the pop-up and ‘OK’ in the sidebar. Your pop-up should look like the below

Replacing a null value with 'Unknown' using Arcade

You can add more cases after line 3 to catch different values. For example, if a single space has been entered instead of null, add:

incidentName == ' ', 'Unknown',

2. Construct a dynamic attribute using existing attribute values

A common case for this example is using an existing identifier to create a URL. It’s often the case that a parcel, land use designation, park or trail will have a URL associated with it that isn’t available in the data. In this example, we’ll use the road closure identifier (INCIDENTID) to construct a URL.

1. Under ‘Attribute Expressions’, click ‘Add’ to start a new expression.
2. Click the edit icon next to ‘Custom’, and change it to a meaningful name like ‘Incident URL’.
3. Enter the following code into the box. A detailed explanation follows:

var id = $feature.INCIDENTID;
var url = 'https://winnipeg.ca/roadclousures/'+id+'.pdf';
return url;

Line 1: This will retrieve the existing value of the Incident ID.

Line 2: This inserts the ID into a URL string. The URL we’re making here doesn’t exist, but you should ensure that the URL you’re trying to make does.

Line 3: Return the URL we’ve made to the attribute value.

4. Click ‘OK’. You should see a new value in the box under ‘Attribute Expressions’. Note the text in between the curly brackets.
5. To display the new value in your pop-up, click ‘CONFIGURE’ under Pop-up Contents.
6. In the box, add Incident URL: {expression/expr1}, and click ‘OK’ in the pop-up and ‘OK’ in the sidebar. Your pop-up should look like the below:

Formatting a URL using Arcade

Wouldn’t it be better if that were a clickable link? Easy.

1. Click ‘CONFIGURE’ again, and we’ll fix it. Highlight the {expression/expr1} text, and click the insert link icon .
2. Move {expression/expr1} to the URL field, and type “Click Here” in the “Link Text”.
3. ‘OK’ out of the pop-up and side bar. Now you’ll have a clickable link that will open in a new tab.

3. Parse values out of long strings (harder)

Sometimes an attribute will contain a string of data, and you want to assign a part of it to a new attribute. Look at the road closure on Academy Road. In the comments, you’ll see the following:

Intermittent closures all week: Mon: 1-4pm; Tues: 2-5pm; Wed: 8-11am and 2-5pm; Thurs: 8am-12pm; Fri: All Day

What a mess. We can use Arcade and Attribute expressions to turn this into five new values, which is one for each day.

1. Under ‘Attribute Expressions’, click ‘Add’ to start a new expression.
2. Click the edit icon next to ‘Custom’, and change it to a meaningful name like ‘Monday Closure’.
3. Enter the following code into the box. A detailed explanation follows:

var search_text = 'Mon: ';
var comment = $feature.COMMENT;
var comment_length = Count(comment);
var start = Find(search_text,comment)
if (start == -1) return NULL;
var string_end = Right(comment,comment_length-start-Count(search_text));
return Left(string_end,Find(';',string_end));

Line 1: This is the identifier for the text you want to extract. To use this method, you have to have a reliable identifier followed by a value like in this example.

Line 2: This identifies the attribute that we’ll search in, being “comment” in this case.

Line 3: This gets the total length of the text in comment. In our example, it’s 109 characters long.

Line 4: This finds the location of the search text in comment. In our example, it occurs at position 32.

Line 5: If the search text can’t be found, then line 4 will return -1. In that case, we can stop and return null.

Line 6: This extracts all of the text that occurs after the search text. I want to look at the expression in the bracket following the comma: comment_length - start - Count(search_text). Count(search_text) will return the number of characters in search_text. In our example, this is 5.

If I swap in the values for our example into the expression, I get 109-32-5, which equals 72. So, line 6 will return 72 characters counting from the right of our comment variable (highlighted):

Intermittent closures all week: Mon: 1-4pm; Tues: 2-5pm; Wed: 8-11am and 2-5pm; Thurs: 8am-12pm; Fri: All Day

Line 7: This will take the highlighted text above, and it will return everything up until the first semi-colon

1-4pm; Tues: 2-5pm; Wed: 8-11am and 2-5pm; Thurs: 8am-12pm; Fri: All Day

4. Click ‘OK’. You should see a new value in the box under ‘Attribute Expressions’. Note the text in between the curly brackets.
5. To display the new value in your pop-up, click ‘CONFIGURE’ under Pop-up Contents.
6. In the box, add Monday Closure: {expression/expr2}, and click ‘OK’ in the pop-up and ‘OK’ in the sidebar.
7. Add 4 more expressions, using the same code as above, but swap in ‘Tues: ‘, ‘Wed: ‘, etc. for the search text.
8. Your pop-up should look like the below

Parsing data from long strings using Arcade

Note, for the Friday expression, you’ll need to change one thing because there’s no semi-colon following the Fri: text. Change the last line to read:

return Left(string_end,Count(string_end));

and the returned text will run straight to the end of the variable rather than searching for a semi-colon.

For the other features that don’t have this comment, you have 5 blank attributes now. It’s possible to remove them but not easy. I’d only recommend this approach if most of your data has a field formatted in a consistent way.