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!
I ended up doing as XanderBakker suggests but I don't actually see in his example. In the custom popup configuration I add the value in a DIV with a style "display" added. I used the Arcade expression to set the display style to either "block" or "none".
Expression "{expression/expr0}":
var ot = IIf($feature.FLDN>0,"block","none"); return ot;
HTML in Custom Attribute Display, HTML view:
<div style="display:{expression/expr0}">Attribute field value: <b>{FLDN}</b></div>
Now the line only displays in the popup if it has a greater than zero value.
Hi Rowena,
It is possible to configure pop-ups using a combination of HTML and arcade. You create your expressions in arcade, and then use the configure pop-up button to format the pop-up using HTML. Once you've opened the configure pop-up dialog window (Figure 1), there is a toggle button that allows you to toggle between the standard interface and HTML (Figure 2).
Figure 1: Shows the green configure button on the configure pop-up panel.
Figure 2: Shows the HTML interface and the toggle button (marked by red outline in this image).
I used a custom script to change the colour of font or background and called this script in the example above, using expression 1 in the example above.
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.
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>'}
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>"
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<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
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?
Webmap now public and should work. Oh I had figured based on the look of them it was 4.x. Interesting.
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
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.
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.
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...
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.
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....
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.
I tried some things, but without any luck.
As my html in the opp-up I have something like:
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="selector token">#table01</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> arial, sans-serif<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-collapse</SPAN><SPAN class="punctuation token">:</SPAN> collapse<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">#tdth01</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN> 1px solid #005da0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>table</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#table01<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#tdth01<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Property Parcels<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#tdth01<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Addresses<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#tdth01<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Some parcel code<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#tdth01<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{expression/expr0}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>table</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
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.
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.
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.
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: <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">srcdoc</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{field with html}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN> // Field would contain some like: <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h1</SPAN><SPAN class="punctuation token">></SPAN></SPAN>This is a Heading<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h1</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>This is a paragraph.<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN> // Resulting in: <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>iframe</SPAN> <SPAN class="attr-name token">srcdoc</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><html<SPAN class="punctuation token">></SPAN><body<SPAN class="punctuation token">></SPAN><h1<SPAN class="punctuation token">></SPAN>This is a Heading</h1<SPAN class="punctuation token">></SPAN><p<SPAN class="punctuation token">></SPAN>This is a paragraph.</p<SPAN class="punctuation token">></SPAN></body<SPAN class="punctuation token">></SPAN></html<SPAN class="punctuation token">></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>iframe</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
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.
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?
Rowena
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
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
