Hyperlink within expression of pop-up in AGOL

04-10-2019 03:13 PM
Occasional Contributor


We have a scenario where we want one of the results in the pop-up to show up as a hyperlink, but only if it hits a certain domain in that layer. If you see the screenshot below, you'll notice "Fiber Service Available." This layer has an expression set up to display different messages depending on the domain. We want a hyperlink here but only if fiber is available. We don't want the message to be a hyperlink if it is different from "Fiber Service Available". I attempted to insert HTML code to create a url into the expression arcade window but I got an 'invalid token' message. This suggests to me that HTML and Arcade don't go together (correct me if I'm wrong). Another thing that complicates this is that the HTML window (for the custom attribute display) is already set up to display the icon  next to the message. Is there a way that I can modify my expression to generate a hyperlink if "Fiber Service is Available" but to not have a hyperlink if any other message displays?

1 Reply
Esri Esteemed Contributor

Hi Adam Bakiera ,

I know that this question is a bit old, but I wanted to share how you could solve this.

There are many ways to create a nice pop-up and show or hide content according to values in the attribute table.

This is a simplified result of what I did including just two services, but the same can be used to include all the services:



To obtain this result, you will need 3 expressions per service and create the html for the pop-up like this:

<img src="{expression/expr0}" /> {expression/expr1} <a href="https://www.gvec.net/internet-plans/sign-up/" style="display:{expression/expr2}"> (<b>sign-up</b>)</a>
<br /><br />
<img src="{expression/expr3}" /> {expression/expr4} <a href="https://www.gvec.net/internet-plans/sign-up/" style="display:{expression/expr5}"> (<b>sign-up</b>)</a>

The first expression per service is to choose the image to use. I used the original image and a grey scale version to indicate the availability of the service. The expression looks like this and will be used to indicate the source of the image (I used some pasted image in a draft document on GeoNet):

var base_url = "https://community.esri.com/servlet/JiveServlet/showImage/";
var imgs_fiber = ["102-13494-2-448650/pastedImage_1.png", "102-13494-1-448633/pastedImage_1.png"];
if ($feature["fiber_acti"] == 1) {
return base_url + imgs_fiber[1];
} else {
return base_url + imgs_fiber[0];

The second expression is used to define the text in a very simple way:

if ($feature["fiber_acti"] == 1) {
return "Fiber Service Available";
} else {
return "Fiber Service Not Available";

The last expression is to configure the style display of the anchor (link) whith one of two values "none" (hide) or "inline" (show):

if ($feature["fiber_acti"] == 1) {
return "inline";
} else {
return "none";

And this should be repeated for each service to ontain the effect.