Conditional Field display with Arcade in Pop Ups (revisited)

2029
16
12-20-2019 08:41 AM

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 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.

Comments

Xander Bakker

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! 

Hi Korin Miles ,

You could try something like this:

var val1 = IFF(IsEmpty($feature.supervisorName), 0, 1);
var val2 = IFF(IsEmpty($feature.supervisorPhone), 0, 1);
var val3 = IFF(IsEmpty($feature.supervisorEmail), 0, 1);

if (val1+val2+val3 == 0) {
    return "none";
} else {
    return "block";
}

It is important to remember that a return in a loop when hit, will exit the loop and in your case never be able to check for 3 empty values.

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. 

Hi kmmiles_usfs ,

Are you sure that this works correctly? You are assigning the text "true" which is not the same as True (boolean). Also you check if it is not equal to the text "none" and that will never be the case.

Buenas tardes, actualmente tengo unas ventanas emergentes creadas a partir de una encuesta de survey123, algunas de las casillas necesito que se oculten en caso de no escribir nada en ellas, como puedo hacer eso? porque leyendo esto entiendo que es crear cuadros emergentes a partir de cero y que permita ocultar las casillas vacías, pero necesito hacerlo con cuadros emergentes ya hechos por la encuesta de survey123 y poder ocultar esas casillas que no se les escribe nada por el hecho de que algunas no serán llenadas  todo el tiempo.

Hola maria ibal ,

Tienes razón, esta manera es bastante complicado para hacer este proceso para múltiples campo y requiere multiples expresiones por campo. Es posible crear una sola expresión evaluado el contenido de los campos y devolver algo o nada. La desventaja es que no puedes cambiar mucho de la manera como se va a presentar los datos. Solamente será un texto con la misma fuenta, color, etc.

Xander,

You say there is an easier way to do this with multiple fields at a time in a single expression while sacrificing the ability to customize the font. Can you give an example please?

Hi JosephLivoti ,

Actually, you would end up sacrificing more than just the font. I would be just plain text that you return. Using the field names from what Korin showed above, an expression could be like this:

var result = "Information:";
if (!IsEmpty($feature.supervisorName)) {
    result += TextFormatting.NewLine + "Supervisor Name: " + $feature.supervisorName;
}
if (!IsEmpty($feature.supervisorPhone)) {
    result += TextFormatting.NewLine + "Supervisor Phone: " + $feature.supervisorPhone;
}
if (!IsEmpty($feature.supervisorEmail)) {
    result += TextFormatting.NewLine + "Supervisor Email: " + $feature.supervisorEmail;
}

return result;

Remember, this just returns plain text. There will be better options in the near future. At the UC last week, the team mentioned that it will be possible to define visibility of attributes based on Arcade expressions. 

Xander Bakker,

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

Hi Joe Livoti ,

First of all having a pop-up with 210 lines, might be a "little" big and not too user-friendly. 

So if I understand you correctly, you have a long list of expressions, but some return an empty line. To avoid this you would have to put everything on a "single" line and include the "TextFormatting.NewLine" inside the expression in case you do have a result.

Again Thank you Xander Bakker for your reply.
I know it's seem quite unwieldy, but this pop-up is catered to an audience of one.

So am I to understand I can write one long expression and include "TextFormatting.NewLine" after each field? Where would i put the formatting? I apologize as my arcade skills are practically nil. What would the below example look like and can it still be formatted with the field name bold (i've included the individual IIF statements along with the how I have it set up in the Attribute display below that):

IIF(isEmpty($feature.status14), "", "Footer")
IIF(isEmpty($feature.status14), "", "Status")
IIF(isEmpty($feature.assignedto14), "", "Inspector")
IIF(isEmpty($feature.other14), "", "Other Inspector")
IIF(isEmpty($feature.date_approved14), "", "Date Approved")
IIF(isEmpty($feature.notes14), "", "Notes")

IIF(isEmpty($feature.status15), "", "Foundation")
IIF(isEmpty($feature.status15), "", "Status")
IIF(isEmpty($feature.assignedto15), "", "Inspector")
IIF(isEmpty($feature.other15), "", "Other Inspector")
IIF(isEmpty($feature.date_approved15), "", "Date Approved")
IIF(isEmpty($feature.notes15), "", "Notes")

{expression/expr5} 
{expression/expr0} {status14}
{expression/expr1} {assignedto14}
{expression/expr2} {other14}
{expression/expr3} {date_approved14}
{expression/expr4} {notes14}
{expression/expr6} 
{expression/expr7} {status15}
{expression/expr8} {assignedto15}
{expression/expr9} {other15}
{expression/expr10} {date_approved15}
{expression/expr11} {notes15}

Thank you again so very much for any help and advice!!

 

Hi Joe Livoti , 

You can use a single expression which reads out all the information and presents the result. The thing that you can't do is apply any formatting at different parts of the result. In you example you have expression single underlined and all expressions in bold. So, I think it might be better to adjust what you already have.

The individual expressions would become:

IIF(isEmpty($feature.status14), "", TextFormatting.NewLine + "Footer")
IIF(isEmpty($feature.status14), "", TextFormatting.NewLine + "Status")
IIF(isEmpty($feature.assignedto14), "", TextFormatting.NewLine + "Inspector")
IIF(isEmpty($feature.other14), "", TextFormatting.NewLine + "Other Inspector")
IIF(isEmpty($feature.date_approved14), "", TextFormatting.NewLine + "Date Approved")
IIF(isEmpty($feature.notes14), "", TextFormatting.NewLine + "Notes")
IIF(isEmpty($feature.status15), "", TextFormatting.NewLine + "Foundation")
IIF(isEmpty($feature.status15), "", TextFormatting.NewLine + "Status")
IIF(isEmpty($feature.assignedto15), "", TextFormatting.NewLine + "Inspector")
IIF(isEmpty($feature.other15), "", TextFormatting.NewLine + "Other Inspector")
IIF(isEmpty($feature.date_approved15), "", TextFormatting.NewLine + "Date Approved")
IIF(isEmpty($feature.notes15), "", TextFormatting.NewLine + "Notes")

...and the text in the pop-up would become a single line like this:

{expression/expr5}{expression/expr0} {status14}{expression/expr1} {assignedto14}{expression/expr2} {other14}{expression/expr3} {date_approved14}{expression/expr4} {notes14}{expression/expr6}{expression/expr7} {status15}{expression/expr8} {assignedto15}{expression/expr9} {other15}{expression/expr10} {date_approved15}{expression/expr11} {notes15}

In case a field is empty the expression will detect it and return an empty string which you wont see and which does not take up an empty line. 

Xander Bakker‌,

Thank you so much that did the trick exactly. While tedious, it formats the data exactly. Do you think there is a way to create a single arcade expression and then plug that into html for the formatting? Not asking you to figure it out, just if you think it is possible. If so, I may make that a project of mine to try and work on in the future. Again, thank you so very much for all of your help!

-Joe

Hi Joe Livoti ,

As I mentioned before there will be functionality in the near future to determine the visibility of a field using Arcade. I do not have any specifics at this moment about how this will work. In ArcGIS Pro you can create HTML and return it in an Arcade expression and it will visualize as you want. In ArcGIS Online, this is not possible yet, however, it is on the road map, since compatibility between  the different components of the platform is very important. Currently, when you create html code in an Arcade expression in ArcGIS Online, it will be interpreted as plain text. 

Hello Xander Bakker Bakker,

Any updates or specifics available yet on the future release that will have the ability to hide/display attribute fields using Arcade?  We have been working with Survey 123 / Arcade to find a way to do exactly this while using ArcGIS Collector Offline.  Thank you!

Hi David Little ,

Sorry to tell you, but I haven't heard anything yet. I also haven't entered the beta for the next ArcGIS Online release, so I am not sure if it will be included in the next update later this month.

Version history
Revision #:
1 of 1
Last update:
‎12-20-2019 08:41 AM
Updated by:
 
Contributors