AnsweredAssumed Answered

Custom HTML in web map popups

Question asked by MidnightYell2003 Champion on Jan 9, 2017
Latest reply on Oct 3, 2017 by MidnightYell2003

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...)

Outcomes