Conditional Visibility w/ Arcade in AGOL – Show/hide pop up field based on attribute value in another field

1680
6
Jump to solution
01-18-2022 11:39 AM
RyanR
by
New Contributor II

Hello. I am new to Arcade and my current task is to hide or show an attribute field and value if another field in the same table meets a condition. I am wondering if I can create an expression to do so. I have seen some examples in Field Maps, but not in AGOL or Portal.

For starters the layer I am using in my map is a hosted feature layer view with configured domain values.  

Example. If the field ProblemType =’s the views domain value of ‘Dead animal’ then show Location on Road field and its value in pop up. If it does not = ‘Dead animal’ then hide.

A couple thoughts.  I know I can create an expression to hide or show the field I want the condition for. Easy right.

IIF(ProbType == "Dead Animal", "inline", "None")

But how do I add another field, the one I want to actually hide/show ($feature.locroad) into this statement or another type of logic to accomplish my task?  

1 Solution

Accepted Solutions
RyanR
by
New Contributor II

Good point and thanks. A fresh head this am, some good coffee, and a dive into the documentation provided me with what I needed for success. Simple once I understood proper syntax of function.

var deadanimal = $feature.probtype == "DEAD ANIMAL";
var roadloc = $feature.locroad;
IIf(deadanimal, roadloc, "None");

 Now to see if this will work in Citizen Problem Reporters built in from, which I believe behaves based on pop up configuration.  

View solution in original post

0 Kudos
6 Replies
jcarlson
MVP Esteemed Contributor

Can you elaborate a bit? The expression you've shared could be used anywhere in your popup text to show/hide not just a field value, but entire HTML elements.

For instance, this HTML in your popup would display the locroad field based on an expression, but the expression itself could evaluate against anything.

<div style="display:{expression/expr0}">{locroad}</div>

Can you share the full expression you've got so far, or the popup's source HTML code?

- Josh Carlson
Kendall County GIS
0 Kudos
RyanR
by
New Contributor II

Thanks for replying Josh and good question. I have not really come up with an expression at this time other than what I have already stated. In the grand scheme of things I am trying to modify some existing HTML pop up code that is included in Esri Citizen Problem Reporter app: 

{category} problem reported on {CreationDate}.<br /><br />
<b>Details:</b> {details}<br /><br />
<b>Status:</b><br />
<table style="border-collapse: separate; border-spacing: 2px 4px; width: 100%; table-layout: fixed; margin: 0px -2px; max-width: 350px;">
<tbody><tr height="16">
<td style="{expression/expr0}; text-align: center; width: 25%"></td>
<td style="{expression/expr1}; text-align: center; width: 25%"></td>
<td style="{expression/expr2}; text-align: center; width: 25%"></td>
<td style="{expression/expr3}; text-align: center; width: 25%"></td>
</tr>
<tr height="24" style="text-align: center;">
<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Submitted</td>
<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Received</td>
<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">In Progress</td>
<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Completed</td>
</tr>
</tbody></table>
<table style=" border-collapse: separate; border-spacing: 0px 0px; width: 100%; table-layout: fixed; margin: 0px -1px;">
<tbody><tr>
<td style="display:{expression/expr4}; text-align: left; width: 100%">
<b><br />Resolved On:</b> {resolutiondt}<br /><br />
<b>Resolution:</b> {resolution}
</td>
</tr></tbody>
</table>

So I would like to add the locroad field and formatting preferably above the Resolved On field and only show it when it meets this expression:

RyanR_3-1642544884777.png

RyanR_7-1642547357722.png

When I added your suggested HTML modified with my expression:

<div style="display:{expression/expr5}"><b>Location on Road:</b> {locroad}</div>

It adds the locroad field, but is not hiding it based on the conditional expression. For example it is showing it for another probtype = Graffiti painted on a county asset. This is a condition when I would like to hide it:

RyanR_6-1642546600755.png

This is the correct behavior for Dead animal and the only case when I want Location on Road: <domain value> to show in the pop up. For any other domain value I don't want to show it.  

RyanR_5-1642546098116.png

Thanks! 

0 Kudos
RyanR
by
New Contributor II

Sure thing, although it gets a bit complex. I think what I am trying to achieve may be simple, but the current HTML code is as follows and is included with the esri Citizen Problem Reporter application which I am trying to customize. 

 

{category} problem reported on {CreationDate}.<br /><br />
<b>Details:</b> {details}<br /><br />
<b>Status:</b><br />
<table style="border-collapse: separate; border-spacing: 2px 4px; width: 100%; table-layout: fixed; margin: 0px -2px; max-width: 350px;">
  <tbody><tr height="16">
    <td style="{expression/expr0}; text-align: center; width: 25%"></td>
    <td style="{expression/expr1}; text-align: center; width: 25%"></td>
    <td style="{expression/expr2}; text-align: center; width: 25%"></td>
    <td style="{expression/expr3}; text-align: center; width: 25%"></td>
  </tr>
  <tr height="24" style="text-align: center;">
 	<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Submitted</td>
 	<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Received</td>
 	<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">In Progress</td>
 	<td style="text-align: center; width: 25%; font-weight: normal; padding-left: 0px; word- wrap: break-word;">Completed</td>
  </tr>
</tbody></table>
<table style=" border-collapse: separate; border-spacing: 0px 0px; width: 100%; table-layout: fixed; margin: 0px -1px;">
  <tbody><tr>
	<td style="display:{expression/expr4}; text-align: left; width: 100%">
	  <b><br />Resolved On:</b> {resolutiondt}<br /><br />
	  <b>Resolution:</b> {resolution}<br /><br />
	</td>
  </tr></tbody>
</table>

 

 I would like to add the field locroad and formatting. I only want locroad to show if the probtype == "Dead animal" If not, I do not want locroad to show. 

I created an expression DeadAnimal[expression/expr5) for the condition:

 

$feature.probtype == "Dead animal";

 

 Then I simply modified and added your HTML idea:

 

<div style="display:{expression/expr5}">{locroad}</div>

 

 While this added the locroad to the pop up, it is not evaluating the expression showing the locroad field and formatting for a probtype that is not "Dead animal"In this case I do not want the locroad field to show because it is a different porbtype (Graffiti painted on county asset)

RyanR_0-1642549358350.png

I hope this provides some clarification. 

0 Kudos
KenBuja
MVP Esteemed Contributor

You have to use an expression that returns values that will show or hide the div. Just returning True or False won't suffice.

 

IIF($feature.probtype == "Dead animal"), "inline", "None")

 

0 Kudos
RyanR
by
New Contributor II

Good point and thanks. A fresh head this am, some good coffee, and a dive into the documentation provided me with what I needed for success. Simple once I understood proper syntax of function.

var deadanimal = $feature.probtype == "DEAD ANIMAL";
var roadloc = $feature.locroad;
IIf(deadanimal, roadloc, "None");

 Now to see if this will work in Citizen Problem Reporters built in from, which I believe behaves based on pop up configuration.  

0 Kudos
RhondaE
New Contributor

Hi, could this be done with a *group* of fields? Also in the context of a Field Maps. I'm struggling with how to include the code for the group since it doesn't show up as a 'Globals' option like the individual fields. Thanks!

Solved:

Hi all, this has been solved by a coworker of mine. Using Arcade syntax preview, the script applied to the *group* of fields was: DomainName($feature, "ARTIFACTS") == "YES"

This results in the group being hidden in the Field Maps form unless YES is selected.

0 Kudos