Custom HTML in web map popups

[AdrianWelsh]

I am trying to adjust the custom attribute display (HTML) in my web map popups to account for the database of attributes.

Here is what I mean. I have a custom popup that I made for a web map/app and it looks nice and clean when the attributes are 'behaving':

But, when I have a really long attribute, like a URL, it makes my popup a lot messier:

Question:

Is there a way to use an if/then statement, or so, in the custom HTML in order for it to see if the attribute is a URL or if it is super long that it won't display it all or convert the html to a clickable link?

Here is the snippet of HTML I used in my custom attribute display:

<table style="border:2px solid; border-collapse:collapse; width:100%">

  <tbody>
<tr style="background-color:#DCDCDC; border:1px solid">
    <th style="border:1px solid; padding:5px"><b>Name</b></th>
    <td style="padding:5px">{SourceFile}</td>
  </tr>
  <tr>
    <th style="border:1px solid; padding:5px"><b>Project #</b></th>
    <td style="padding:5px">{ProjectNumber}</td>
  </tr>
   <tr style="background-color:#DCDCDC; border:1px solid">
    <th style="border:1px solid; padding:5px"><b>Date</b></th>
    <td style="padding:5px">{CreateDate}</td>
  </tr>
  <tr>
    <th style="border:1px solid; padding:5px"><b>Description</b></th>
    <td style="padding:5px">{Description}</td>
  </tr>
  <tr style="background-color:#DCDCDC; border:1px solid">
    <th style="border:1px solid; padding:5px"><b>User</b></th>
    <td style="padding:5px">{User_}</td>
  </tr>
  <tr>
    <th style="border:1px solid; padding:5px"><b>Discipline</b></th>
    <td style="padding:5px">{Discipline}</td>
  </tr>
  <tr style="background-color:#DCDCDC; border:1px solid">
    <th style="border:1px solid; padding:5px"><b>Visit Type</b></th>
   <td style="padding:5px">{VisitType}  <br /></td>
  </tr>
  <tr>
    <th style="border:1px solid; padding:5px"><b>Route</b></th>
   <td style="padding:5px">{Route}  <br /></td>
  </tr>
</tbody></table>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 (it sure is complicated when you cannot use Style or CSS elements properly...)

[TiffanySelvidge1 · Accepted solution]

My links are coded and formatted before uploading. Mine are formatted as: <a href="http://url" target"_blank">This link will open the document in a new tab</a>. The popup (using Portal) translates it into a URL and only displays the text "This link will open the document in a new tab". I tried coding directly in the popup but was unsuccessful. My method works for my urls and is very quick at converting.

[AdrianWelsh]

Wow, that's a brilliant way to solve the problem! So simple. (Though, it's too bad I have little control over the custom HTML within ArcGIS Online).

Thanks for helping Tiffany!

[GeneH_Chesco]

Adrian - I like the look of your popup with the title bar transparency and overall styling of it. Would you mind sharing the URL to that map?

[AdrianWelsh]

Thanks Gene. Here is the web app:

https://arcg.is/0nmjfj 

I've learned a lot about what you cannot do with making custom HTML in ArcGIS Online. Many things are quite deceiving and the bottom line is, make sure you always test your work on an outside browser to see how things will look to other people.

[TKSHEP]

Is there a way I can get a copy of the how or how you configured the popup in the map and app?  I like your popup and would like to do something similar with adding the photo within the popup like you did.

Thank you!

[AdrianWelsh]

Trisha,

Take a look at the initial post. That has the custom html I used in my popup. Let me know if that works.

I have now discovered this link:

https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

It mentions what HTML is supported in AGOL.