Conditional Field display with Arcade in Pop Ups

KellyGerrow · ‎07-18-2017

The June 2017 Release of ArcGIS Online enabled the capability to write custom Arcade expressions for use in Pop Ups!! A common request was to be able to format pop ups to display attribute values and labels when values are present and not have them appear when the values are blank. Although there are plans to incorporate this functionality directly into the pop up in the future, it is currently possible to use Arcade and Custom Attribute Displays to accomplish this.

I'm going to use an existing example of my Heron Watch Data and display the description when one is present. I will hide the field value and field label when it isn't present. View the Heron location in Singapore to see a feature with no description, or add features using this GeoForm App with no description.

Check out the steps below to accomplish this and then share your real examples!

Step 1: Create an Arcade Expression that tests for values using IsEmpty. This will be used to determine if the label for the attribute needs to be displayed or not.

Sample code:

IIF(isEmpty($feature.description), "", "Description")

If the feature is empty, a blank value will be returned. If there is a value, the label "Description" will be returned in the expression.

2. Configure a table using Custom Attribute Display in the pop ups that is configured to use the expression as the label.

- Enable the option to view Source HTML:

- Create a table using the HTML sample below. The text in curly brackets refer to attribute values in the feature layer. The plain text between the first table elements specifies the label for each attribute.

<table cellpadding="0px" cellspacing="3px">
     <tbody>
           <tr valign="top">
               <td><b>Observed Time (UTC)</b></td>
               <td><span>{viewed}</span> 
               </td>
            </tr>
            <tr valign="top">
               <td><b> Observed Time (Local) </b></td>
               <td>{textviewed}</td>
            </tr>
            <tr valign="top">
              <td><b>Species</b></td>
              <td>{type_of_heron}</td>
            </tr>
           <tr valign="top">
               <td><b>{expression/expr0}</b></td>
               <td>{description}</td>
           </tr>
      </tbody>
</table>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

- Note that {expression/expr0} is the value of the Arcade expression created in Step 1 that is used for the attribute label and the description value is used for the value. If no value is present in the description there will also be no value for the label.

- Unselect the HTML Source option and your formatted pop up configuration should look similar to this screen shot:

3. Save your Web Map and make an app to show off your Pop Ups

Description Values Present:

Description Values not Present

If you don't want to use a table to display your attributes, consider integrating this workflow with free text and calculated Arcade Expressions as outlined in this blog by Bernie Szukalski:

https://blogs.esri.com/esri/arcgis/2015/12/28/custom-attribute-display-pop-ups/

utenalarosa · ‎03-04-2021

@XanderBakker

I got this layer from the living atlas this is the link to the map service https://feature.tnris.org/arcgis/rest/services/Parcels/stratmap19_land_parcels_48/MapServer/0

XanderBakker · ‎03-04-2021

Hi @utenalarosa ,

Thanks for sharing the URL of the service. As I expected the "empty" fields contain a single space and therefore are not considered empty. To avoid this change your expressions to use Trim:

IIf(IsEmpty(Trim($feature["Owner_Name"])), "", "Owner Name");

utenalarosa · ‎03-04-2021

@XanderBakker

It still not showing the field names I invited you to the group I created.

XanderBakker · ‎03-04-2021

Hi @utenalarosa ,

I see what is wrong. The expressions are correct but you have to correct the HTML. In the HTML you are using "{espression/expr6}" when it has to be "{expression/expr6}". It is the same for all the other expressions that you are calling in the HTML of the pop-up.

utenalarosa · ‎03-04-2021

@XanderBakker

thank you so much it's because English is my second language Italian is my first language.

XanderBakker · ‎03-04-2021

Hi @utenalarosa ,

Don't worry the important thing is that we figured it out and it is working now!

AdamBakiera · ‎09-22-2021

@MikieKelly

What you posted in this thread on page 2 is exactly what I'm looking for! The formatting doesn't matter to me and I have a lot of fields to deal with. However, when I copy and paste your code, it tests ok but it does not accomplish the task of hiding pop-up fields that are blank. Is there something that needs to be adjusted in there for this to happen? Note: I am using the new map viewer because this map is being used in Field Maps.

Thank you!

XanderBakker · ‎09-23-2021

Hi @AdamBakiera ,

Quick question, does the expression return the "filtered" information correctly in a single field, but do the rest of the fields still display?

If so, you would need to hide the fields that are already displayed with the Arcade expression: Go into the pop-up configuration, and in the list of fields you will see the option to select the field you want to include in the pop-up.

AdamBakiera · ‎09-23-2021

@XanderBakker

Thanks for the quick response! So I'm actually needing 50 fields to be turned on in that setting and I'm wanting to display non-null fields only. I read your other article about this but if I understand correctly, I'd have to write a line of code for every field. Far from ideal when there are 50 of them! That's why when I saw this, I figured it would be a much quicker solution.

On another note, are there any plans to implement an easier way to hide null value fields? Feels like it shouldn't be so cumbersome to accomplish this...

Thanks!

XanderBakker · ‎09-23-2021

Hi @AdamBakiera ,

I agree that it would be a lot easier to have an option that allows you to suppress the field if it is empty. It would be very cumbersome to use multiple expressions per field to obtain the desired result. Hopefully, we will see this option in the near future.

RyanTucker · ‎10-14-2021

Here is how I was able to hide blank fields from my popup. Maybe it will help someone.

Just a bunch of If statements that build the popupString field by field. Not very pretty. But it works for my purposes

// Declare variable with fields to access in FeatureSet function

var assrFields = ['PARCELID', 'SA_FullAddress', 'SA_CityStateZip', 'First_Owner_Assee_Name', 'First_Owner_Name_Overflow', 'Special_Name_Legend', 'Special_Name_Assee_Name',                                                   'Second_Owner_Assee_Name', 'MA_FullAddress', 'MA_CityStateZip', 'Legal_Description_Line1', 'Legal_Description_Line2', 'Legal_Description_Line3', 'Legal_Description_Line4',
                  'Legal_Description_Line5', 'Legal_Description_Last']


// Access 'Parcels related AssessorSBF' table as a FeatureSet
var relatedrecords = (FeatureSetByRelationshipName($feature, 'AssessorSBF', assrFields, false))


// Build the pop-up string by iterating through all related features
var popupString = ''
for (var f in relatedrecords)
{

var linebreak = "-------------------------"
popupString += linebreak

    if (!IsEmpty(f.PARCELID)){
        var a = (TextFormatting.NewLine + TextFormatting.NewLine + "APN: " + f.PARCELID)
        popupString += a
    }
    
    if (!IsEmpty(f.SA_FullAddress)){
        var a = (TextFormatting.NewLine + f.SA_FullAddress)
        popupString += a
    }
     
    if (!IsEmpty(f.SA_CityStateZip)){
        var a = (TextFormatting.NewLine + f.SA_CityStateZip)
        popupString += a
    }   
     
    if (!IsEmpty(f.First_Owner_Assee_Name)){
        var a = (TextFormatting.NewLine + TextFormatting.NewLine + "Owner Info: " + TextFormatting.NewLine + f.First_Owner_Assee_Name)
        popupString += a
    } 
     
    if (!IsEmpty(f.First_Owner_Name_Overflow)){
        var a = (TextFormatting.NewLine + f.First_Owner_Name_Overflow)
        popupString += a
    } 
     
    if (!IsEmpty(f.Special_Name_Legend)){
        var a = (TextFormatting.NewLine + f.Special_Name_Legend)
        popupString += a
    } 
     
    if (!IsEmpty(f.Special_Name_Assee_Name)){
        var a = (TextFormatting.NewLine + f.Special_Name_Assee_Name)
        popupString += a
    } 
     
    if (!IsEmpty(f.Second_Owner_Assee_Name)){
        var a = (TextFormatting.NewLine + f.Special_Name_Assee_Name)
        popupString += a
    } 
     
    if (!IsEmpty(f.MA_FullAddress)){
        var a = (TextFormatting.NewLine + f.MA_FullAddress)
        popupString += a
    }
     
    if (!IsEmpty(f.MA_CityStateZip)){
        var a = (TextFormatting.NewLine + f.MA_CityStateZip)
        popupString += a
    } 
     
    if (!IsEmpty(f.Legal_Description_Line1)){
        var a = (TextFormatting.NewLine +TextFormatting.NewLine + "Legal Info: " + TextFormatting.NewLine + f.Legal_Description_Line1)
        popupString += a
    } 
     
    if (!IsEmpty(f.Legal_Description_Line2)){
        var a = (TextFormatting.NewLine + f.Legal_Description_Line2)
        popupString += a
    } 
     
    if (!IsEmpty(f.Legal_Description_Line3)){
        var a = (TextFormatting.NewLine + f.Legal_Description_Line3)
        popupString += a
    }
     
    if (!IsEmpty(f.Legal_Description_Line4)){
        var a = (TextFormatting.NewLine + f.Legal_Description_Line4)
        popupString += a
    }
     
    if (!IsEmpty(f.Legal_Description_Line5)){
        var a = (TextFormatting.NewLine + f.Legal_Description_Line5)
        popupString += a
    }
     
    if (!IsEmpty(f.Legal_Description_Last)){
        var a = (TextFormatting.NewLine + f.Legal_Description_Last)
        popupString += a
    }
popupString += TextFormatting.NewLine + linebreak

}    

//DefaultValue(popupString, 'No Addess to show')
return popupString

Here's the result...

Arcade popup.png

JeffreyWilkerson · ‎10-14-2021

Granted you will need to do a test for each field, but you could reduce the code required using a ternary condition test as in:

var aNL = TextFormatting.NewLine;
var popupString = "";
var lineBreak = "_______________________";
popupString += lineBreak;
popupString += IIF(!IsEmpty($feature.PARCELID), aNL + "APN: " + $feature.PARCELID, "");
popupString += IIF(!IsEmpty($feature.incorpname), aNL + $feature.SA_FullAddress, "");
return popupString

Susan_McClendon_NPS · ‎12-17-2021

I have an opposite issue. We have a legacy dataset with a description field that already contains HTML formatting. In Map Viewer classic, the field comes in with the HTML tags decoded, but not honoring the HTML in the display (i.e. everything default, no custom expression):

If I use new mapViewer and configure the popup for the related table value with a custom expression it gets worse, the html is displayed encoded:

// Filter related features by using a common attribute
var relatedData = FeatureSetByRelationshipName($feature,"FirePlanningLanguage")
var relatedDataSorted = OrderBy(relatedData, 'ActivationDate')

var popupString =''
for (var f in relatedDataSorted){
popupString += Text(f.ActivationDate, 'MMMM Y') + TextFormatting.NewLine +
"DeactivationDate: " +
DefaultValue(f.DeactivationDate, 'no data') + TextFormatting.NewLine +

"Description: " +
DefaultValue(f.Description, 'no data') + TextFormatting.NewLine
}

DefaultValue(popupString, 'No related language.')

We ETL the legacy data in FME, so we have the option of manipulating it or stripping the HTML there, but our end users would like to preserve it if possible.

Is there anyway to get the Arcade Expression to recognize the HTML and display appropriately? Is there a different way to encode the field when we ETL in FME that would make it work?

TIA ~ Susan

NicholasRutledge · ‎04-15-2022

It seems the new webmap doesn't use HTML coding. Has there been a solution to removing blank fields from the popup with the new version of webmap? If I go into the classic version of webmap I see where I have the "<span style="display:{expression/expr0}">" using attribute expressions coding I found from another thread on here but in the new version that code is removed. Below is a two screenshots of the two codes in each version. Seems like there would be a basic function to remove any blank fields from the popup without having to use coding techniques.

Screen Shot 2022-04-16 at 12.38.30 AM.png

XanderBakker · ‎04-18-2022

Hi @NicholasRutledge ,

As of the December 2021 update, there is a different way to create HTML content in the pop-up. There are some blogs on this topic by Paul Barker:

LukeAllen2 · ‎11-18-2022

Hi would anyone be able to confirm if this same technique Kelly shared will work with the latest mapviewer?

MarkGambordella · ‎12-07-2022

I am having an issue modifying the HTML script in wrote in a text box within the popup. It will not allow me to modify the script in any way. when I make changes, they are revert back to the original. I am trying to change the color of the custom font and background within the popup the expression represents. Would like to change the green to a blue. any help is appreciated. I have the webapp and feature layers set to edit.

krisam01 · ‎01-09-2024

Hi @XanderBakker and @KellyGerrow,

Sorry to be joining this party so late. This is an old thread and there maybe an easier or better way to do things in 2024. I have been reading through the threads and am struggling with the last step of my process. I have a text pop-up that I would like to have only display headings and attributes for those with data.

I have been able to use IFF (IsEmpty to have my pop-up not display data if there is nothing to display. However I have not figured out how to remove empty spaces between the lines with no data displayed.

Here is my HTML:

<p>
    <span style="font-size:18px;"><strong>{Community_Name}&nbsp;</strong></span>
</p>
<div style="background-color:#c7cdb1;border-left:3px solid white;padding:0.4rem 0.3rem 0.3rem 0.6rem;">
    <p>
        <span style="font-size:18px;"><strong><u>{expression/expr0}</u></strong></span><br>
        <br>
        <span style="font-size:18px;">{expression/expr1}&nbsp;</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr2}&nbsp;</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr3}&nbsp;</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr4}&nbsp;</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr5}&nbsp;</span>
    </p>
</div>
<p>
    &nbsp;
</p>
<div style="background-color:#c7cdb1;border-left:3px solid white;padding:0.4rem 0.3rem 0.3rem 0.6rem;">
    <p>
        <span style="font-size:18px;"><strong><u>{expression/expr6}</u></strong></span><br>
        <span style="font-size:18px;">{expression/expr7}</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr8}</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr9}</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr10}</span>
    </p>
    <p>
        <span style="font-size:18px;">{expression/expr11} &nbsp; &nbsp;&nbsp;</span>
    </p>
</div>

My expressions are variations on this:

return IIf(IsEmpty($feature.Action_1),"", "Action Strategies")

return IIf(IsEmpty($feature.Action_1),"", $feature.Action_1)

Here is an example of the output.

I would appreciate any help you can provide.

Thank you.

Amy