Create HTML for popup with Arcade?

RowenaTansley · ‎09-29-2017

Is it possible to create HTML for a popup with Arcade? Something along the lines of:

But that gives me this:

Any suggestions appreciated.

Thanks!

KellyGerrow · ‎09-29-2017

Can you explain your workflow in more depth. Arcade will return a value to be included in a pop up, label or used in rendering. You can use supported html in pop ups, which you can apply to the Arcade values:

Supported HTML—ArcGIS Online Help | ArcGIS

Check out this blog for examples:

https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2017/07/18/conditional-field-disp...‌

-Kelly

RowenaTansley1 · ‎09-29-2017

Hi Kelly,

Thanks for the response. What I want to do is parse HTML using Arcade and reference that in the popup. I suppose another example that might be simpler is, if I have HTML stored in a field, can that be rendered in a popup?

Thanks,

Rowena

XanderBakker · ‎10-01-2017

I guess the answer is no if you look at the link of the supported html that Kelly Gerrow provided.

In theory it would have been possible to have a iframe and use the scrdoc attribute (HTML iframe srcdoc Attribute) and fill it with a fully qualified html page (none of this would require Arcade BTW):

// html pop-up would have:
<iframe srcdoc="{field with html}"></iframe>

// Field would contain some like:
<html><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>

// Resulting in:
<iframe srcdoc="<html><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>"></iframe>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, iframes are not allowed and filtered out.

What kind of HTML does your field contain? If you can elaborate on that we might be able to advise you how you could change your data to construct the html in the pop-up.

RowenaTansley1 · ‎10-02-2017

Hi Xander,

Thanks for the response. If Iframes were a possibility that would be wonderful but I understand they are not supported.

Basically I have information in my polygon layer that is actually 1-many relationships (I didn't like how the Related Table functionality is handled by AGOL). So, I put all the information into the parent table. Currently I am experimenting with JSON, and if Arcade can somehow loop through it. Happy to use comma delimited, or whatever Arcade can understand. An example would be Property Parcels having many addresses and many legal information records. I want to loop through this information stored in 1 field, and display it nicely in Rows and with Headings. In the end I want to be able to format the data, and there is an unknown amount of records embedded in the field. So I am hoping to use Arcade (or anything else you might recommend!) to look through the field and then display the information nicely.

I do have complete control of my data and can change the format as needed.

I hope that makes sense.

Thanks!

RowenaTansley1 · ‎10-02-2017

It looks from the document you provided that the tag <p> is accepted. But I can't get it to work from an Arcade expression.

XanderBakker · ‎10-02-2017

I tried some things, but without any luck.

As my html in the opp-up I have something like:

<style>
#table01 {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
#tdth01 {
    border: 1px solid #005da0;
    text-align: left;
    padding: 8px;
}
</style>

<table id="#table01">
  <tr>
    <th id="#tdth01">Property Parcels</th>
    <th id="#tdth01">Addresses</th>
  </tr>
  <tr>
    <td id="#tdth01">Some parcel code</td>
    <td id="#tdth01">{expression/expr0}</td>
  </tr>
</table>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

On line 21 you see the expression. However, trying to get an enter in there between different items, just did not work. See a screenshot of some things I tried.

Don't use the carriage return and/ or line feed (line 9 and 10), since it will break things!

The Console in some cases shows that each items is on a separate line (using "\n"), however in the pop-up it is stripped out and items will be on the same line. No luck either using "<br>" or using lists "<ul><li>" etc...all html returned from Arcade seems to get stripped.

Anonymous User · ‎01-31-2018

I'd like this also. HTML in Arcade. And ability to use it to alter the DOM and popup appearance based on data-driven logic.

Also, button to add custom html on TOP of regular popup. Usually I like everything in the popup, keeping most fields on, but I just need to add a link. Currently you have to create it all again by hand in the </> button html editor view, then add the link after re-entering all the other attribute fields. Would be a nice time-saver. Perhaps it could have an option to keep all the regular html from the normal popup and let you just add on to it.

RubénPérez_Planillo · ‎11-28-2018

Hello,

I have the same need.

In my case I want to check what fields are not empty in order to show only those. I want to use only one arcade expression, where I evaluate all fields and return a table to draw.

But the only thing I obtain is the html code written in the popup window.

My arcade code is something like this:

Concatenate([

IIf(IsEmpty($feature["name0"]), "", Concatenate(["<tr><td>name0:</td><tr> ",$feature["name0"],"</tr>"],""))
,IIf(IsEmpty($feature["name1"]), "", Concatenate(["<tr><td>name1:</td><tr>",$feature["name1"],"</tr>"],""))
,IIf(IsEmpty($feature["name2"]), "", Concatenate(["<tr><td>name2:</td><tr>",$feature["name2"],"</tr>"],""))
,IIf(IsEmpty($feature["name3"]), "", Concatenate(["<tr><td>name3:</td><tr>",$feature["name3"],"</tr>"],""))

......

.....

......

],"")

The alternative is to customize popup window programmaticaly, but I'd prefer to store this behaviour on the webmap.

Hope this will be available soon....

XanderBakker · ‎11-28-2018

If you look at my answer here https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2017/07/18/conditional-field-disp... you will see that you can include display:none and display:inline attributes in the html which are defined based on a field being none and will either show or hide the row.