does Hub not support Arcade popups?

228
6
03-30-2020 12:39 PM
KevinMacLeod4
Frequent Contributor

Graham Hudgins

I have a popup on our dashboard.

Operations Dashboard for ArcGIS 

It does not show up on our Hub in the embedded dashboard, the popup gets mangled. Does Hub mess with popups, or does it not support Arcade?

Coronavirus Response in Chatham County 

Popup expression:

var cnty = $feature.County;
var st = $feature.State;
var c = $feature.Cases;
var d = $feature.Deaths;
var p = $feature.CountyPopACS18Est5Yr;
var sm = $feature.CountySqMiles;

var outstring = cnty + " County, " + st + "<br />";
outstring += "Positive Cases: " + c + "<br />";
outstring += "Deaths: " + d + "<br />";
outstring += "Percent of Positive Cases that Died: " + Round(((d / c) * 100), 5) + "%<br />";
outstring += "Percent of County Population Positive: " + Round(((c / p) * 100), 5) + "%<br />";
outstring += "Cases per Square Mile: " + Round((c / sm), 5) + "<br />";

return outstring

0 Kudos
6 Replies
GrahamHudgins
Esri Regular Contributor

I'm seeing the values flow in but the styling isn't

I'll get a colleague to take a look

GrahamHudgins
Esri Regular Contributor

looks like your popup styling isn't compatible with the 4.x popup webmap (make sure you use the map viewer beta to preview the popups....since that's the map viewer that's on 4.x JSAPI)

a developer on our team embedded just using the JSAPI

https://codepen.io/tomwayson/pen/QWboEva?editable=true&editors=100

KevinMacLeod4
Frequent Contributor

Hi Graham, I have created a clone of the Dashboard and webmap, to begin tinkering.  test Dashboard  test webmap  

It works great in the Dashboard.  (Which I see is using API 3.32)  But it doesn't render in the web map, either the new one (Beta; 4x) or the existing AGOL one (3x web map still production)  Nor does it render correctly in the embedded Dashboard when it is embedded in Hub.  Inspecting the current AGOL webmap components in F12, despite it having the particular CDN folder structure it also appears to be using 3.32.  And yet... the popups don't render correctly.  It only works in the Dashboard.  

It loads fine and calculates the values. It's just the line break tags that don't work anywhere except the Dashboard.   They are shown as <br\>

I don't know if this is related, but something us users have been requesting for a few years  - is Arcade and popups need to be able to render HTML and support CSS to really unlock their potential, not only for basic styling and formatting like this; but to enable full data-driven visuals and HTML. For example make the popup background a certain color; shape or size, based on an attribute value. Show or hide an image based on an attribute. Etc.  Full HTML not just the handful of tags currently supported.   Create HTML for popup with Arcade? The possibilities with CSS and HTML are limitless.  A big thing would actually be simply supporting the Title tag, to enable Tooltips. I use those extensively for my WAB sites, to make tools discoverable and intuitive for users. Pure HTML so it is easy and reliable.

In conclusion - is this still a limitation or a bug?

My main concern here specifically is that I want it to work in both places. I want the line breaks in the production Dashboard, but also in the embedded Dashboard in the Hub.  How can this be achieved?  And if it is fixed to work in 4x would that break it on the Dashboard popup (3x)  itself? Is it possible to work in both?

This is the Expression used to generated the popup.  It is all in the webmap. No styling anywhere else. All hosted on AGOL.

Thank you Graham Hudgins and team for the support and replies!

 var cnty = $feature.County;
var st = $feature.State;
var c = $feature.Cases;
var d = $feature.Deaths;
var p = $feature.CountyPopACS18Est5Yr;
var sm = $feature.CountySqMiles;

var outstring = cnty + " County, " + st + "<br />";
outstring += "Positive Cases: " + c + "<br />";
outstring += "Deaths: " + d + "<br />";
outstring += "Percent of Positive Cases that Died: " + Round(((d / c) * 100), 5) + "%<br />";
outstring += "Percent of County Population Positive: " + Round(((c / p) * 100), 5) + "%<br />";
outstring += "Cases per Square Mile: " + Round((c / sm), 5) + "<br />";

return outstring

0 Kudos
XanderBakker
Esri Esteemed Contributor

Hi kmsagis , 

Have you used the "TextFormatting.NewLine" in the Arcade expression instead of "<br />"? The web map beta viewer supports that.

var cnty = $feature.County;
var st = $feature.State;
var c = $feature.Cases;
var d = $feature.Deaths;
var p = $feature.CountyPopACS18Est5Yr;
var sm = $feature.CountySqMiles;

var outstring = cnty + " County, " + st + TextFormatting.NewLine;
outstring += "Positive Cases: " + c + TextFormatting.NewLine;
outstring += "Deaths: " + d + TextFormatting.NewLine;
outstring += "Percent of Positive Cases that Died: " + Round(((d / c) * 100), 5) + "%" + TextFormatting.NewLine;
outstring += "Percent of County Population Positive: " + Round(((c / p) * 100), 5) + "%" + TextFormatting.NewLine;
outstring += "Cases per Square Mile: " + Round((c / sm), 5) + TextFormatting.NewLine;

return outstring;
KevinMacLeod4
Frequent Contributor

Greetings Xander Bakker‌, Yes that works in 4x.  It doesn't work, in the actual Dashboard.  Is it one, or the other?

Enhancement: Backport NewLine to Arcade 3x popups to provide cross-API capability.

Best scenario: full HTML/CSS support at 3x/4x or at least 4x API for popups and Arcade.

0 Kudos
XanderBakker
Esri Esteemed Contributor

Hi kmsagis , 

I have noticed this behavior and in a couple of weeks the 4.X based beta of ArcGIS Dashboard will be available with some nice configurations based on Arcade. I assume that that version will have support for the line breaks in the pop-up. I did a small test with the Experience Builder and that seems to have support in the Feature Info widget for Arcade expressions and new lines. 

0 Kudos