topic Version 4.15 -> 4.16+ PopupTemplate error in ArcGIS JavaScript Maps SDK Questions

Version 4.15 -> 4.16+ PopupTemplate error

YimYean — Tue, 07 Mar 2023 02:09:43 GMT

Hello,

I'm looking at updating to the latest SDK version 4.26 but getting error with the popupTemplate.content property and found that it started in 4.16. Is there something that I would need to change in 4.16 to fix that error?

In 4.15 no issue, the popup template loads.

Then with 4.16 it doesn't load the content, just the title.

-- Code to create the FeatureLayer and assign the popup template var featureLayer = new FeatureLayer({ url: searchLayerInfoList[i].url, layerId: searchLayerInfoList[i].id, // configure the feature layer to return all fields outFields: ["*"], popupTemplate: getPopupTemplate(displayTitle) }); -- Creating the popup template. Fails on the content retrieval in 4.16+ function getPopupTemplate(displayTitle) { var template = { title: displayTitle, //content: generateCustomContent, content: function (target) { var fields = [ { "fieldName": "OBJECTID", "label": "OBJECTID", "visible": true }]; return [{ type: "fields", fieldInfos: fields }]; }, actions: [customZoomAction] } template.overwriteActions = true; return template; }

Best,

Yim

Re: Version 4.15 -> 4.16+ PopupTemplate error

YimYean — Tue, 07 Mar 2023 16:39:40 GMT

Was able to re-use the popup template function example code and updated to return the content array to show that the issue is reproducible. In below example it's using latest 4.26 SDK.

<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title> PopupTemplate - use functions to set content | Sample | ArcGIS Maps SDK for JavaScript 4.26 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.26/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> let populationChange; require(["esri/Map", "esri/views/MapView", "esri/layers/Layer"], ( Map, MapView, Layer ) => { const map = new Map({ basemap: "dark-gray-vector" }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map, zoom: 6, center: [-87, 34] }); Layer.fromPortalItem({ portalItem: { // autocasts as new PortalItem() id: "e8f85b4982a24210b9c8aa20ba4e1bf7" } }).then((layer) => { // add the layer to the map map.add(layer); // Create a new popupTemplate for the layer and // format the numeric field values using the FieldInfoFormat properties. Call the custom populationChange() // function to calculate percent change for the county. const popupTemplate = { // autocasts as new PopupTemplate() title: "Population in {NAME}", outFields: ["*"], content: populationChange }; layer.popupTemplate = popupTemplate; function populationChange(feature) { var content = [{type:"fields", fieldInfos: [ { fieldName: "POP2010", format: { digitSeparator: true, places: 0 } }, { fieldName: "POP10_SQMI", format: { digitSeparator: true, places: 2 } }, { fieldName: "POP2013", format: { digitSeparator: true, places: 0 } }, { fieldName: "POP13_SQMI", format: { digitSeparator: true, places: 2 } } ]}]; return content; } }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: Version 4.15 -> 4.16+ PopupTemplate error

UndralBatsukh — Tue, 07 Mar 2023 17:54:47 GMT

Hi there,

It looks like you can no longer autocast the FieldsContent object. If you update your code to create and return a new instance of this class then the popup should/will work. I tested it quickly and in my test the following works.

Re: Version 4.15 -> 4.16+ PopupTemplate error

YimYean — Tue, 07 Mar 2023 18:32:17 GMT

Hi @UndralBatsukh ,

I tried the update and the console error and popup no longer gives an error but the fields aren't loading. Are you able to provide the full sample in case I'm missing anything.

From my full sample code above I made the following update.

But the fields aren't displayed.

Re: Version 4.15 -> 4.16+ PopupTemplate error

UndralBatsukh — Tue, 07 Mar 2023 19:22:48 GMT

It is working for me. Here is a codepen shows it working: https://codepen.io/U_B_U/pen/JjarRyY?editors=1000

Re: Version 4.15 -> 4.16+ PopupTemplate error

YimYean — Tue, 07 Mar 2023 20:14:37 GMT

Thanks, looks like my method of importing the required FiedsContent and FieldInfo didn't work when it was used within the populationChange function. But once I moved it to the top as in your example that resolved the issue.

Thank you for your help 🙂