Create HTML for popup with Arcade?

[RowenaTansley]

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!

[RubénPérez_Planillo]

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

[Anonymous User]

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.

[FFSL_-_JustinJohnson]

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.

[Anonymous User]

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.

[KellyGerrow]

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

[Anonymous User]

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

[EmmaHatcher]

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?

[KydyrovMeirambek]

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

[EmmaHatcher]

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>'
}

[XanderBakker]

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.