Conditional Field display with Arcade in Pop Ups (revisited)
In 2017 Kelly Gerrow shared a great blog on https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2017/07/18/conditional-field-disp... , 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>
<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>
<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>
</tr>
</tbody></table>Information after tableIn 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.
I am creating a custom table in my pop-up with Arcade and I have a field that I am combining three attributes to populate. If all three attributes are empty, I would like the row in the table to not show up. I've been reading your responses on a couple of other threads and they have helped me a lot, but I can't seem to get this one to work. Here is an example of my code...
I'm then using this arcade expression in my HTML as you showed above. Thank you for any help you can provide!
Thank you for your help! I ended doing this, and it worked great...
One thing that I did want to pass along, is that if you are trying to configure a table the "block" throws off the table alignment. I found this thread on stack overflow and it looks like the issue is that the <tr> style is not supported in HTML5. html - Why does not display:block and 100% width work on table rows? - Stack Overflow
"Block" works great if you are not using a table in the pop-up, but for a table, returning "table-row" is what gave me a row that was 100% of the table.
Thank you for the reply. I was wondering if you could help on one other matter. I have gone and done things the LONG and TEDIOUS way. I have created over 200 individual IIF statements: ex IIF(isEmpty($feature.notes35), "", "Notes").
My popup currently looks like this:
How can I get rid of those fields that are empty?
Popup Expression currently is this: 
with a total of 210 lines.
Any help would be greatly appreciated. I've looked at the other blogs and other questions people have asked and i just cant quite get it down.
-Joe
Thank you,
Mr Xander Bakker @ XanderBakker, hope you could help me to figure out how to limit the empty (blank spot) if the amenities = No.
Link to my map: https://arcg.is/0SCaGy
I tried both blank image and a ' ' space, but all showing ugly
Case 1:
var checkvalue = $feature.ROADCYCLE
var img_blank = 'https://otrd.maps.arcgis.com/sharing/rest/content/items/a59adfcb8fec43b9a9c1de5b1e65f93c/data'
var img_show = 'https://otrd.maps.arcgis.com/sharing/rest/content/items/52d5725bf8cf47dc94861d057ac2936d/data'
iif(checkvalue =='Yes',img_show,img_blank)
Case 2:
var checkvalue = $feature.ARCHERY
var img_show = 'https://otrd.maps.arcgis.com/sharing/rest/content/items/496f45f58b8a483c961c00b1f67efe95/data'
iif(checkvalue =='Yes',img_show,' ')
Hi @XanderBakker your tutorials on conditional images in pop-ups have really helped me!! I was wondering if it's possible to hide cells rather than rows if the field value is empty?
Here's my arcade expression that looks at an attribute to see if a specific value is there
var txt = Replace($feature["Activity2"], " ", "");
var lst = Split(txt, ",");
if (IndexOf(lst, "hiking") > -1) {
return "block";
} else {
return "none";
}
Here's the html code for the table where the images with links will be displayed, although unfortunately it doesn't seem to work. The conditional images show up, but it's not formatted as a single row table.
<table style="border-collapse:collapse; width:100%">
<tbody>
<tr>
<td style="display:{expression/expr0}"><a href=""><img alt="hiking" src="" /></a></td>
<td style="display:{expression/expr1}"><a href=""><img alt="cycling" src="" /></a></td>
<td style="display:{expression/expr2}"><a href=""><img alt="dog walking" src="" /></a></td>
<td style="display:{expression/expr3}"><a href=""><img alt="photography and filming" src="" /></a></td>
<td style="display:{expression/expr4}"><a href=""><img alt="birding" src="" /></a></td>
<td style="display:{expression/expr8}"><a href=""><img alt="kicksledding" src="" /></a></td>
<td style="display:{expression/expr7}"><a href=""><img alt="fat tire biking" src="" /></a></td>
<td style="display:{expression/expr5}"><a href=""><img alt="snoeshoeing" src="" /></a></td>
<td style="display:{expression/expr6}"><a href=""><img alt="cross-county skiing" src="" /></a></td>
</tr>
</tbody>
</table>
Thank you very much for your help!
Hi @XanderBakker -
Thanks for the reply. Yes, since I wrote that post I found this Esri Lesson that describes how to work with the new features in Arcade. I also got help from a colleague who suggested I try this (which is similar to the scripts you shared above)
var fieldInfos = []
if (!IsEmpty ($feature.C1)) {
Push (fieldInfos, {fieldName: 'C1'})
};
if (!IsEmpty ($feature.C2)) {
Push (fieldInfos, {fieldName: 'C2'})
};
if (!IsEmpty ($feature.C3)) {
Push (fieldInfos, {fieldName: 'C3'})
};
if (!IsEmpty ($feature.C4)) {
Push (fieldInfos, {fieldName: 'C4'})
};
if (!IsEmpty ($feature.MOD1)) {
Push (fieldInfos, {fieldName: 'MOD1'})
};
if (!IsEmpty ($feature.MOD2)) {
Push (fieldInfos, {fieldName: 'MOD2'})
};
if (!IsEmpty ($feature.MOD3)) {
Push (fieldInfos, {fieldName: 'MOD3'})
};
if (!IsEmpty ($feature.MOD4)) {
Push (fieldInfos, {fieldName: 'MOD4'})
};
if (!IsEmpty ($feature.MOD5)) {
Push (fieldInfos, {fieldName: 'MOD5'})
};
return {
type: 'fields',
description: $feature.DESCRIP,
fieldInfos: fieldInfos,
attributes: {
'C1': $feature.C1,
'C2': $feature.C2,
'C3': $feature.C3,
'C4': $feature.C4,
'MOD1': $feature.MOD1,
'MOD2': $feature.MOD2,
'MOD3': $feature.MOD3,
'MOD4': $feature.MOD4,
'MOD5': $feature.MOD5
} // replace this dictionary with your own key-value pairs
}
But the popups show that some of the empty fields/rows are filtered out but some are not. The first popup shown here is for the first feature, and is the one that is tested in the expression builder, which shows that it builds an array of 9 attributes and dictionary pairs... but shouldn't the array for this feature only have an array of 4 attributes, since if the others are empty they shouldn't be pushed to the array?
I also tried modifying the first script you sent, which again builds an array of 9 fields & dictionary, but then the popups don't return any fields or even the Description, so I'm definitely doing something wrong... but since I'm very inexperienced, I don't know what it is... I'm probably not naming or listing the variables correctly? I would like to get this correct before trying the other script you sent, since I do want to display the field aliases instead of the field names.
Thanks so much!
var flds = ['C1', 'C2', 'C3', 'C4', 'MOD1', 'MOD2', 'MOD3', 'MOD4', 'MOD5'];
var info = [];
var atts = {};
for (var i in flds) {
var fldname = flds[i];
if (!IsEmpty($feature[fldname])) {
Push (info, {'fieldName': fldname})
atts[fldname] = $feature[fldname];
}
}
return {
type: 'fields',
description : $feature.DESCRIP,
fieldInfos: info,
attributes : atts
}
Thank you for your post, I modified your expression to hide null values (We have 102 fields and often only 1-2 have a value entered).
(I am new to Esri)
It seemed to work & I could view just the fields which had values (number of mosquitoes collected of each species type & at what life stage (Larvae 1-4 or adult F/M).
However then the species information disappeared & I can only see the title & field list. I can't see how to turn 'off or on' the expression to display the positive fields:
(i.e. The title & description from expression is shown but none of the actual species information)
Here is the expression modified from your example above:
var flds = ['Ochlerotatus_camptorhynchus1','Ochlerotatus_camptorhynchus2','Ochlerotatus_camptorhynchus3','Ochlerotatus_camptorhynchus4','Ochlerotatus_camptorhynchusF','Ochlerotatus_camptorhynchusM','Culex_pervigilans1','Culex_pervigilans2','Culex_pervigilans3','Culex_pervigilans4','Culex_pervigilansF','Culex_pervigilansM','Culex_quinquefasciatus1','Culex_quinquefasciatus2','Culex_quinquefasciatus3','Culex_quinquefasciatus4','Culex_quinquefasciatusF','Culex_quinquefasciatusM','Ochlerotatus_antipodeus1','Ochlerotatus_antipodeus2','Ochlerotatus_antipodeus3','Ochlerotatus_antipodeus4','Ochlerotatus_antipodeusF','Ochlerotatus_antipodeusM','Ochlerotatus_notoscriptus1','Ochlerotatus_notoscriptus2','Ochlerotatus_notoscriptus3','Ochlerotatus_notoscriptus4','Ochlerotatus_notoscriptusF','Ochlerotatus_notoscriptusM','Ochlerotatus_australis1','Ochlerotatus_australis2','Ochlerotatus_australis3','Ochlerotatus_australis4','Ochlerotatus_australisF','Ochlerotatus_australisM','Ochlerotatus_subalbirostris1','Ochlerotatus_subalbirostris2','Ochlerotatus_subalbirostris3','Ochlerotatus_subalbirostris4','Ochlerotatus_subalbirostrisF','Ochlerotatus_subalbirostrisM','Coquillettidia_iracunda1','Coquillettidia_iracunda2','Coquillettidia_iracunda3','Coquillettidia_iracunda4','Coquillettidia_iracundaF','Coquillettidia_iracundaM','Coquillettidia_tenuipalpis1','Coquillettidia_tenuipalpis2','Coquillettidia_tenuipalpis3','Coquillettidia_tenuipalpis4','Coquillettidia_tenuipalpisF','Coquillettidia_tenuipalpisM','Opifex_fuscus1','Opifex_fuscus2','Opifex_fuscus3','Opifex_fuscus4','Opifex_fuscusF','Opifex_fuscusM','Culiseta_novazealandae1','Culiseta_novazealandae2','Culiseta_novazealandae3','Culiseta_novazealandae4','Culiseta_novazealandaeF','Culiseta_novazealandaeM','Culiseta_tonnoiri1','Culiseta_tonnoiri2','Culiseta_tonnoiri3','Culiseta_tonnoiri4','Culiseta_tonnoiriF','Culiseta_tonnoiriM','Maorigoeldia_argyropus1','Maorigoeldia_argyropus2','Maorigoeldia_argyropus3','Maorigoeldia_argyropus4','Maorigoeldia_argyropusF','Maorigoeldia_argyropusM','Culex_asteliae1','Culex_asteliae2','Culex_asteliae3','Culex_asteliae4','Culex_asteliaeF','Culex_asteliaeM','Culex_rotoruae1','Culex_rotoruae2','Culex_rotoruae3','Culex_rotoruae4','Culex_rotoruaeF','Culex_rotoruaeM','Opifex_chathamicus1','Opifex_chathamicus2','Opifex_chathamicus3','Opifex_chathamicus4','Opifex_chathamicusF','Opifex_chathamicusM','Culex_sitiens1','Culex_sitiens2','Culex_sitiens3','Culex_sitiens4','Culex_sitiensF','Culex_sitiensM','Other','Exotic_Species'];
var info = [];
var atts = {};
for (var i in flds) {
var fldname = flds[i];
if (!IsEmpty($feature[fldname])) {
Push (info, {'fieldName': fldname})
atts[fldname] = $feature[fldname];
}
}
return {
type: 'fields',
title: 'Mosquitoes collected',
description : 'Larvae 1-4 (instar) or Adult F/M',
fieldInfos: info,
attributes : atts
}
Do you have any suggestions as to why I can't see the positive values (Species information) from the table?
Thank you!
Jessica
Xander-Can you help me pleas? I'm trying to follow your information in the post and am lost where I actually put the html information and then the Arcade expression. Am I clicking under Options-Attribute expressions and adding it there? Am I clicking Add content and choosing Arcade? I'm working in Portal and trying to configure my popup to remove the fields that don't have a number.
