Conditional Field display with Arcade in Pop Ups (revisited)

Document created by xander_bakker on Dec 20, 2019Last modified by xander_bakker on Dec 20, 2019
Version 2Show Document
  • View in full screen mode

In 2017 Kelly Gerrow shared a great blog on Conditional Field display with Arcade in Pop Ups , but there are still a lot of questions on how to hide rows of a table that do not have values. In this document I will try to explain how to do this with Arcade in a web map.


I have a feature layer, added 3 fields and randomly created some data including null values:


The idea is to create a table that will show the 3 rows when all 3 field have a value and hides each row that are empty:


So how can we hide rows and not leaving empty lines? This can be done by using a style that shows or not shows the row, which can be conditionally done using Arcade. See below the HTML used in the example above:

Information before table<table><tbody>
  <tr style="display:{expression/expr0}">
    <td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px">Description 1</td>
    <td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px">{Field1}</td>
  <tr style="display:{expression/expr1}">
    <td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px">Description 2</td>
    <td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px">{Field2}</td>
  <tr style="display:{expression/expr2}">
    <td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px">Description 3</td>
    <td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px">{Field3}</td>
</tbody></table>Information after table


In this case there are 3 Arcade expressions. Each expression will validate if an attribute has a value or is empty. In case it is empty it will return "none" (hide the row) en in case it has a value it will return "block" (show the row). See below the expression to validate field 1 (the same is done for fields 2 and 3):

IIf(IsEmpty($feature.Field1), "none", "block");


If you have any questions, just post them below.

3 people found this helpful