Web Map Popup - Display URL Hyperlink if Exists?

[ArthurSmith2]

Hello Esri Community!  I am looking for help with a seemingly simple task: within a popup text element, I want to display a clickable hyperlink for a record if it exists.

The closest I have come is using this Arcade expression and text element configuration... however the 'View Link' text shows as un-clickable link if URL not populated; not ideal.

I want the 'View Link' clickable text to only show if link present.  Can someone explain how this can be accomplished?  Thanks in advance!

// Reference your attribute field containing the URL

var myUrl = $feature.ASBUILTS;

// Check if the field is empty or null

if (IsEmpty(myUrl) || Trim(myUrl) == "") {

    return ""; // Return nothing if it doesn't exist

} else {

    // Return a formatted HTML link if it does exist

    //return '<a href="' + myUrl + '"  target="_blank" rel="noopener noreferrer">Visit Website</a>';

    return myUrl;

}

[JonM32]

@ArthurSmith2 

Here is one idea for your expression. It should return a URL is if exists, and if it doesn't, nothing will be returned.

var myUrl = Trim(DefaultValue($feature.ASBUILTS, ""));

if (IsEmpty(myUrl)) {
return "";
}

return '<a href="' + myUrl + '" target="_blank" rel="noopener noreferrer">View Link</a>';

[ArthurSmith2]

Hi Jon, thanks for your response!

I tried using your Arcade code and unfortunately the Map Viewer isn't rendering as an html link and instead shows the plain text html:

Any ideas to resolve?

[JonM32]

@ArthurSmith2 I'm not sure to be honest - at first I thought this would work but now thinking about it, I don't think there's a way to get the hyperlink text to disappear in the popup when there's nothing to open. It may be a limit of using the text as a hyperlink.

[KenBuja]

You have to add that code in an Arcade element for the html link to work properly. The code would look something like this (which also uses template literals)

var myUrl = Trim(DefaultValue($feature.ASBUILTS, ""));
var output = "";
if (!IsEmpty(myUrl)) {
  output = `<a href="${myUrl}" target="_blank" rel="noopener noreferrer">View Link</a>`;
}

return { 
  type: "text", 
  text: output 
};