What's the simplest way to add hyperlink to a pop-up?

3411
11
05-09-2018 07:05 PM
RobBlash
Occasional Contributor III

I want to launch a survey from a popup. Is there a simple way to add a hyperlink without going to a fully custom popup? I'd like the pop-up to look the same as the default style.

In a custom popup I've figured out how to mimic the table HTML (from the default popup), however the table html elements don't support the class attribute. This means the css applied to the default popups doesnt work on the custom popup, which is most evident when viewing the popups in collector.

Long story short, is there another way to add hyperlinks to pop-up?

11 Replies
AdrianWelsh
MVP Honored Contributor

Rob,

Sure, but you kind of have to trick it a little.

So, if your attribute said: " www.google.com "

You would need to write it like this: " <a href="url">www.google.com</a> "

This essentially turns it into a clickable link.

RobBlash
Occasional Contributor III

Thanks for the suggestion. Maybe I should clarify my question a little bit. I'm not trying to show a field that is populated with a url. I'm trying to add a hyperlink to a specific survey as shown in my attachment.

Is there another way to do this without configuring "a custom attribute display" for the popup? Alternatively, is there a way to style a custom popup to look the same as the default popups?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rob,

   I do not know of a way to add a link that is not data from an attribute field without using custom attribute display. As far as being able to get the popup to look like the default "A list of field attributes". The way to do it is as outlined here (it involves some work depending on the number of attributes):

  1. Leave the popup configured as "A list of field attributes".
  2. click on on of the feature in the map viewer to display the popup.
  3. right click on one of the attributes in the popup and choose inspect (Google Chrome). You will get something like this:
  4. Choose the parent table element and right click > copy > copy element
  5. Now change the popup configuration to "a custom attribute display".
  6. In the "Custom Attribute Display" configuration dialog switch to "view html source" (toolbar bottom row left button) and paste the copied element.
  7. Find the <td class="attrValue">blah blah</td> and select/highlight the "blah blah" and then click the "+" button and choose the field.
  8. Repeat for all attribute fields.
  9. Finally add you custom link test to the "Custom Attribute Display" configuration dialog.
RobBlash
Occasional Contributor III

Robert,

Thanks for the great explanation. This is how my popups are currently set up, but unfortunately the class attribute for the table cell elements <td> does not stick. There is limited support for HTML element attributes as per the AGOL help:

Supported HTML—ArcGIS Online Help | ArcGIS 

I've added some inline styling to at least get the font color to match, and this works well enough on the web. However, in Collector the popups are not so nice. I'm not sure how the html is ultimately processed in Collector, so this is why I was looking for an alternative way to add a hyperlink. I think we'll just have to live with some ugly popups.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rob,

   Those classes are the ones that esri uses when they make the popup so I am not sure why you had an issue with them. During my testing they worked fine.

0 Kudos
RobBlash
Occasional Contributor III

Everything appears to work fine after you config the popup. However when you close the web map then re-open it, the class is stripped out of the <td> tag because class is not a supported attribute for <td>

AdrianWelsh
MVP Honored Contributor

Rob,

This has happened to me before regarding how it looks fine at first, but not afterwards. I have learned to do my html configurating in the ArcGIS Online popup, save it, then try opening the map in another web browser, typically a private browser so it can have a fresh set of eyes on it. This way, I should know what the end user is seeing.

It's quite misleading when you see it how you think it should look and like how it looks, but in reality, the tags are getting stripped out.

That site you listed: Supported HTML—ArcGIS Online Help | ArcGIS  should be a good place to see what won't be used in AGOL.

RobertScheitlin__GISP
MVP Emeritus

Rob,

   Good to know that it strips the class property out after you save. I guess inline styling is the way then after you get the general table structure.

ChadKopplin
Occasional Contributor III

Rob,

In your underlying shapefile or feature class, how about adding a new field and just call it hyperlink, then calculate the records to your hyperlink URL, then it will be available in your popup in collector, you may have to choose that field to be displayed.