topic Re: Problem with popups in 4.13 and later in ArcGIS JavaScript Maps SDK Questions

Problem with popups in 4.13 and later

ShawnMoore — Thu, 24 Sep 2020 19:24:55 GMT

I've been trying to get my map to display a popup when a point on my feature layer is clicked and it looks like something has changed between ArcGIS js api 4.12 and 4.13 (and later) that breaks my code. I didn't see any notes in the release notes that indicated any required code updates for moving to later versions of the api.

Here's a code pen with the broken popup template (I've distilled this example to a very very basic map)

Link to Codepen

Run the code pen to recreate the problem (try clicking any point), then change the 2 api references from 4.13 to 4.12 and the popups work fine when you click a point on the map.

Anyone know why this works in 4.12 and not in 4.13 (or 4.16)?

Thanks!

Shawn

Re: Problem with popups in 4.13 and later

RobertScheitlin__GISP — Thu, 24 Sep 2020 20:47:15 GMT

Shawn,

If you switch your code to use JS API Next url then your code works fine.

<script src="https://js.arcgis.com/next/">‍

So there has been a bug for a couple of version with this.

Re: Problem with popups in 4.13 and later

ShawnMoore — Thu, 24 Sep 2020 22:57:27 GMT

Thanks, Robert, getting closer....

The next branch gets us closer, but I think the new code has at least 1 more problem. I switched to next on my more detailed production map and had to make sure the outFields: was specified as all fields ( "*") otherwise it wouldn't work.

From there I thought I was done until I clicked on my link in the popup. (There's a link that takes the user to a specific properties page for the point on the map.)

In next any relative link is replaced with a link to the actual map html page. If I switch to 4.12, I get my relative link to my properties page, but next seems to wipe that out in favor of the current page.

It's a bit harder to show on code pen, but here's the pen. https://codepen.io/snmoore/pen/wvGNReZ If you change from 4.12 to next you can see the different in the url when you hover over the details link in the popup.

-Shawn

Re: Problem with popups in 4.13 and later

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:39:20 GMT

Shawn,

Use a function to set the content and it avoids the sanitization of the popup content.

                var propertiesTemplate = {  // autocasts as new PopupTemplate()
                    title: "<h5><strong>{bname}</strong></h5>",
                    content: contentFunc
                };
          
                function contentFunc(feature){
                  var div = document.createElement("div");
                  div.innerHTML = "123 Main St.<br/><br/>" +
                        "<strong>" + feature.graphic.attributes.category + ":</strong> 0.345<br/><br/>" +
                        '<a target="_blank" href="mydetailpage.html?id=12345">View Details Page</a>'
                  return div;
                }‍‍‍‍‍‍‍‍‍‍‍‍

Re: Problem with popups in 4.13 and later

ShawnMoore — Sun, 12 Dec 2021 02:39:23 GMT

Thanks Robert this solved the problem!

note: I also had to add an outFields property in my propertiesTemplate with "*" to make other fields available in my more detailed production template.

i.e.

            var propertiesTemplate = {  // autocasts as new PopupTemplate()
                title: "<h5><strong>{bname}</strong></h5>",
                outFields:["*"],    // specify outfields of * to get access to all fields in your content function
                content: contentFunc
            };‍‍‍‍‍

-Shawn