Select to view content in your preferred language

Pop-up Hyperlink - Change Font Colour

261
3
02-16-2025 05:58 PM
Labels (1)
Hels77
by
Regular Contributor

What is the simplest way to make a hyperlink show in blue instead of grey within a pop-up?
Thank you 🙂

Hels77_0-1739757433123.png

 

0 Kudos
3 Replies
JasonBOCQUET
Frequent Contributor

best way is by using Arcade and HTML 

0 Kudos
jsorfleet_COA
New Contributor

I've been doing this using Arcade and HTML. Here's an example of how I've configured this using an Arcade element in the pop-up.

One issue is that if the names of the fields change at all, the pop-up will break and not display properly. Another issue is if you have multiple layers that have hyperlinks in some of the fields, you'll have to hard code in the specific fields you want displaying in the pop-up for each layer and add in the html syntax for each field that has a hyperlink. 

Not hardcoding in the fields with links to attempting to generalize the script breaks it.

@JasonBOCQUET is there a simpler way that you're been implementing Arcade and HTML code to configure blue pop-ups?

return {
  type: "fields", // Specifies that the return type is a list of fields
  fieldInfos: [ // Defines the fields to be displayed in the pop-up
    { fieldName: "Assessor Parcel Number" }, // Unique identifier for a parcel
    { fieldName: "GIS Acres" }, // Area of the parcel in acres
    { fieldName: "Internal Property Report" }, // Internal link to property report
    { fieldName: "Assessor Parcel Map" }, // Link to the official parcel map
    { fieldName: "Google map link" }, // Link to the location on Google Maps
    { fieldName: "Public Property Report" }, // Publicly available property report
    { fieldName: "Area Sq Ft" }, // Area of the parcel in square feet
    { fieldName: "Date data downloaded" }, // Date when the data was last updated
    { fieldName: "Property owner name" }, // Name of the property owner
    { fieldName: "Property owner address1" }, // First line of the owner's address
    { fieldName: "Property Owner Address2" }, // Second line of the owner's address
    { fieldName: "Property Owner City" }, // City where the property owner resides
  ],
  attributes: { // Defines how values are assigned to the fields
    "Assessor Parcel Number": $feature.APN, // Retrieves parcel number from the feature attributes
    "GIS Acres": $feature.GISACRES, // Retrieves GIS-calculated acres from the feature attributes
    
    // Generates a clickable hyperlink if the attribute contains a valid URL.
    // <a> tag creates the hyperlink.
    // href="${$feature.INTERNAL_L}" sets the destination URL.
    // style="color: blue; text-decoration: underline;" makes the link blue and underlined.
    // target="_blank" ensures the link opens in a new tab.
    // The text "More info" is displayed as the clickable link instead of "View".
    "Internal Property Report": IIF(
      !IsEmpty($feature.INTERNAL_L) && $feature.INTERNAL_L != null && $feature.INTERNAL_L != "", 
      `<a href="${$feature.INTERNAL_L}" style="color: blue; text-decoration: underline;" target="_blank">More info</a>`, 
      ""
    ),
    
    // Generates a clickable hyperlink for the Assessor Parcel Map with the same styling and behavior as above.
    "Assessor Parcel Map": IIF(
      !IsEmpty($feature.AP_LINK) && $feature.AP_LINK != null && $feature.AP_LINK != "", 
      `<a href="${$feature.AP_LINK}" style="color: blue; text-decoration: underline;" target="_blank">More info</a>`, 
      ""
    ),
    
    // Generates a clickable hyperlink for the Google Map link with the same styling and behavior as above.
    "Google map link": IIF(
      !IsEmpty($feature.GOOGLEMAP) && $feature.GOOGLEMAP != null && $feature.GOOGLEMAP != "", 
      `<a href="${$feature.GOOGLEMAP}" style="color: blue; text-decoration: underline;" target="_blank">More info</a>`, 
      ""
    ),
    
    // Generates a clickable hyperlink for the Public Property Report with the same styling and behavior as above.
    "Public Property Report": IIF(
      !IsEmpty($feature.Public_L) && $feature.Public_L != null && $feature.Public_L != "", 
      `<a href="${$feature.Public_L}" style="color: blue; text-decoration: underline;" target="_blank">More info</a>`, 
      ""
    ),
    
    "Area Sq Ft": $feature.Area_sq_ft, // Retrieves parcel area in square feet
    "Date data downloaded": $feature.TRANDATE, // Retrieves the last update date of the data
    "Property owner name": $feature.NAME, // Retrieves the name of the property owner
    "Property owner address1": $feature.ADDRESS1, // Retrieves the first line of the owner's address
    "Property Owner Address2": $feature.ADDRESS2, // Retrieves the second line of the owner's address
    "Property Owner City": $feature.CITY, // Retrieves the city of the property owner
  }
};

 

0 Kudos
JasonBOCQUET
Frequent Contributor

hi @jsorfleet_COA for example i have this on my popup : 

JasonBOCQUET_0-1739957319043.png

 

here is the code : 

 

var siren = $feature.ets_siren
var url = "https://www.pappers.fr/entreprise/"+siren
var HTML = ""
HTML += "<p style='text-align: center'><a href='"+url+"' style='text-decoration:underline #0C9ED9'><span style='font-family: Calibri, sans-serif; font-size: 14px; color: rgb(12, 158, 217);'>Voir la société sur <b>Pappers</b> !<img src="+"https://services.pappers.fr/img/logo-ps.svg"+" style='width: 80px; height: 25px;'/></a></span></p>"

 

It's not realy different of what you do.

 

0 Kudos