nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

RyanR

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?

Find more posts tagged with

Accepted answers

RyanR

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.

All comments

RhondaE

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.

RyanR

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.

kenbuja

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")

RyanR

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)

I hope this provides some clarification.

RyanR

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:

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:

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.

Thanks!

jcarlson

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.