topic Re: Create HTML for popup with Arcade? in ArcGIS Online Questions

Create HTML for popup with Arcade?

RowenaTansley — Fri, 29 Sep 2017 15:27:26 GMT

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!

Re: Create HTML for popup with Arcade?

KellyGerrow — Fri, 29 Sep 2017 21:24:28 GMT

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-display-with-arcade-in-pop-ups?sr=search&searchId=d8ccaf3d-e141-4771-a731-e367608cfecc&searchIndex=0‌

-Kelly

Re: Create HTML for popup with Arcade?

RowenaTansley1 — Fri, 29 Sep 2017 21:32:00 GMT

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

Re: Create HTML for popup with Arcade?

XanderBakker — Sat, 11 Dec 2021 19:41:01 GMT

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.

Re: Create HTML for popup with Arcade?

RowenaTansley1 — Mon, 02 Oct 2017 15:10:59 GMT

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!

Re: Create HTML for popup with Arcade?

RowenaTansley1 — Mon, 02 Oct 2017 15:31:28 GMT

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.

Re: Create HTML for popup with Arcade?

XanderBakker — Sat, 11 Dec 2021 19:41:04 GMT

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.

Re: Create HTML for popup with Arcade?

Anonymous User — Wed, 31 Jan 2018 20:11:27 GMT

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.

Re: Create HTML for popup with Arcade?

RubénPérez_Planillo — Wed, 28 Nov 2018 17:14:24 GMT

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

Re: Create HTML for popup with Arcade?

XanderBakker — Wed, 28 Nov 2018 19:24:33 GMT

If you look at my answer here https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2017/07/18/conditional-field-display-with-arcade-in-p… 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.

Re: Create HTML for popup with Arcade?

RubénPérez_Planillo — Thu, 29 Nov 2018 07:56:17 GMT

Thank you!

But It's not what I need. I have 300 fields (I didn't prepare that data... ) and I want to avoid to create 300 arcade expressions. My idea is to generate only one containing all HTML code needed. I automate arcade expression creation in an excel and then load it into the webmap configuration.

That's why i need the posibility of inject HTML through arcade expressions...

It would be nice to have a possibility to automate creation of arcade expressions...

Re: Create HTML for popup with Arcade?

Anonymous User — Thu, 29 Nov 2018 18:38:12 GMT

agree ^^ we need ability to inject full html /css in to the popup via arcade. Basically step 1) allow full HTML CSS in popup 2) allow Arcade to generate it, and base it off attributes so attributes can drive look and feel of popups.

Re: Create HTML for popup with Arcade?

Anonymous User — Tue, 14 May 2019 17:19:30 GMT

We are still looking to create popups that render full HTML as generated by Arcade.

Interestingly this does work in Story Maps. Just not in web Apps or web maps. I was thinking this is because the story maps are API 4.x whereas the WebApp Builder apps and webmap are 3.x? Esri team, any thoughts on if this means app popups will support full HTML in the future?

Example viewer, with both a Story Map and a WebApp from the same webmap:

https://sagis.maps.arcgis.com/apps/MapSeries/index.html?appid=f5e546c14e2b4761acb8d3ab0e65f9a3

In the WebApp not only does the HTML not render but the links in the attachments don't seem to work.

Re: Create HTML for popup with Arcade?

KellyGerrow — Tue, 14 May 2019 23:24:47 GMT

Hi Kevin,

This map doesn't appear to be shared. Cam you share the app so we can look into it a bit further?

Html is not supported when passed through an Arcade Expression so needs to be configured with supported HTML. The Story Map Series app is written in 3.x so it looks like it is something else that is causing the discrepancy.

Thanks,

Kelly

Re: Create HTML for popup with Arcade?

Anonymous User — Wed, 15 May 2019 02:06:10 GMT

Webmap now public and should work. Oh I had figured based on the look of them it was 4.x. Interesting.

Re: Create HTML for popup with Arcade?

FFSL_-_JustinJohnson — Sun, 12 Dec 2021 16:29:18 GMT

This is exactly what I'm attempting to do with an Arcade expression. I have a feature class with a "Notes" field, whose input I can't control. Users can either type a short note, or they can paste a URL to a document. If they enter a URL, I would like the popup to show a link in the popup, saying "More info" instead of the full URL to the document as a plain string. If they enter a note, I would like to show that as a string. I have this Arcade expression:

   IIf(Find('http', $feature.Note) == 0, 
       Concatenate(["<a href='", $feature.Note, "'>More info</a>"]),
       $feature.Note
       )

To summarize, if the Note begins with 'http', I want to format it as an HTML link to that URL and return it. If not, just return the original Note string unchanged.

The expression returns the correct behavior, but the HTML isn't rendering in the popup. It shows as a string, inside quotes, when I look at the popup source code. That seems to be the issue. I would like the popup to render the <a> tag as an HTML link, as if I typed that <a> element directly inside the popup's HTML Source in the Custom Attribute Display, not as a quoted string.

Most other solutions have suggested adding something like this to the popup:

   <a href=' {expression/expr0} '>More Info</a>

But, I can't do that, if the Note field contains text, instead of a URL. Again, I didn't create this schema, I'm trying to use some logic to get around a less-than-ideal data model.

Re: Create HTML for popup with Arcade?

EmmaHatcher — Sat, 11 Dec 2021 19:41:06 GMT

I also have this question! I'd like to create a nicely-formatted table for a one-to-many relationship, and only add table rows for the number of values. The rows per feature vary from 1 to 15. Right now, I have to do this using a list in Arcade:

var main = FeatureSetByRelationshipName($feature,"Remote_Releases",["FACILITY","AGENCY","SPECIES","MIN_BROOD_YEAR","Max_Year","TOTAL_RELEASED"])
var fltr = OrderBy(Filter(main,"TOTAL_RELEASED > 0"), 'Max_Year DSC')

var rList = '';
for (var r in fltr){
    rList += TextFormatting.NewLine + '-(' + r.AGENCY + ' ' + r.MIN_BROOD_YEAR + '-' + Text(r.Max_Year) + ") " + r.SPECIES + ": " + Text(Round(r.TOTAL_RELEASED), '#,###') + ' released'
}

return rList‍‍‍‍‍‍‍‍‍

This produces a list of values as shown below:

What I'd really like to do instead of iteratively creating a list based on the number of releases at a site, is iteratively create rows in a table so that this pop-up is more consistently formatted like the rest of my custom pop-ups in the map:

I tried out the conditional formatting display option with no luck, since once you're beyond the maximum releases for a given site, the attempt to index the value returns an out of bounds error. Is this capability on the horizon for Arcade?

Re: Create HTML for popup with Arcade?

KydyrovMeirambek — Thu, 05 Nov 2020 16:55:20 GMT

You can generate html using arcade expressions. After just put created expression to text popup

return "<style>"+
"#popup {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}"+
"#popup td, #mytable th {border: 1px solid #dddddd;text-align: left;padding: 8px;}"+
"#popup tr:nth-child(even) {background-color: #eeeeee;}"+
"</style>"+
"<html><body><table id=popup>"+
"<tr>"+"<td>Name </td>"+"<td>"+$feature.NAME+" </td>"+"</tr>"+
"<tr>"+"<td>Owner </td>"+"<td>"+$feature.OWNER+" </td>"+"</tr>"+
"<tr>"+"<td>Key person </td>"+"<td>"+$feature.KEYPERSON+" </td>"+"</tr>"+"</table>"+
"</html></body>"

Re: Create HTML for popup with Arcade?

EmmaHatcher — Thu, 05 Nov 2020 17:57:46 GMT

I just tried to iteratively build a set of tables using the code I posted below, and it returns nothing...

var main = FeatureSetByRelationshipName($feature,"Remote_Releases",["FACILITY","AGENCY","SPECIES","MIN_BROOD_YEAR","MAX_BROOD_YEAR","TOTAL_RELEASED"])
var fltr = OrderBy(Filter(main,"TOTAL_RELEASED > 0"), 'MAX_BROOD_YEAR DSC')

var rList = '<table><tbody>';
for (var r in fltr){
rList += TextFormatting.NewLine + '<table><tbody>

<tr><th>Species: ' + r.SPECIES + ' - Agency: ' + r.AGENCY + '</th></tr>

<tr><td>Brood Years: ' + r.MIN_BROOD_YEAR + '-' + Text(r.MAX_BROOD_YEAR) + "</td></tr>

<tr><td>Total Released: " + Text(Round(r.TOTAL_RELEASED), '#,###') + '</td></tr>

</tbody></table>'
}

Re: Create HTML for popup with Arcade?

XanderBakker — Thu, 05 Nov 2020 19:09:58 GMT

Hi Kydyrov Meirambek and Emma Hatcher ,

Can you return HTML using Arcade in a Pop-up? Yes. Will you get something useful? No. To visualize the effect with the current and beta map viewer in ArcGIS Online:

So HTML will be returned, but it will not give you the expected result in the pop-up. Returning HTML in the pop-up using Arcade is possible in ArcGIS Pro, but not in the web map.

And ezhatcher , the reason the expression is not returning anything, is since you forgot to include the statement "return rList;" on the last line. However, when you work with a web map you will not get the result you are after.