Control your Empty Fields with Arcade Element

Sometimes you have to include a lot of fields in your feature layer to store things like extra comments or long item descriptions ... but if some features have most of those fields blank you are faced with the problem of having lots of blank space in your pop-ups. As an example, I recently had a feature class with 12 description fields because some of the features had a lot of components to list. And when I got to a feature with only three of the fields populated I still had to have nine more empty spaces displayed in the pop-up.

So as a fix, I used the new Arcade</> element in my pop-up to look at the fields and only display the ones that were not null.

In the Arcade </> element, you define a set of variables at the top of the code block, then use those variables in the 'return' statement to control what is displayed. (They provide a template to work from) Within the return statement you can also include HTML formatting and in this case I used the <BR> tag to add a new line for each value.

The code for the variables uses an Arcade When() statement combined with the IsEmpty() function to see if the field is empty, then sets the value of the variable to '' if it is ... and to the field value if it isn't. It looks like this for the first description field:

var Desc1 = When(IsEmpty($feature.ProjDesc1),'',$feature.ProjDesc1)

For the rest of the description fields it does the same check but adds the HTML tag to go to a new line for each non-empty value:

var Desc2 = When(IsEmpty($feature.ProjDesc2),'','<br>' + $feature.ProjDesc2)

var DescX = When(IsEmpty($feature.ProjDescX),'','<br>' + $feature.ProjDescX)

Repeat as many times as you need to test and display all your comment fields (or whatever other empty fields you want to control).

Finally, in the Return statement add all the variables - note that typing on a new line in the Return statement isn't seen as a carriage return. The <br> tag controls that:

return {

type : 'text',

text : ` // This uses the Back-Tic for the return statement instead of quotes

${Desc1}

${Desc2}

${DescX}

` }

Now you no longer have to pad your pop-ups with empty fields!