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
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>
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.
function populationChange(feature) {
require(["esri/popup/content/FieldsContent", "esri/popup/FieldInfo"], (FieldsContent, FieldInfo) => {
let fieldInfo1 = new FieldInfo({
fieldName: "POP2010",
label: "POP 2010",
visible: true
});
let fieldInfo2 = new FieldInfo({
fieldName: "POP2013",
label: "POP 2013",
visible: true
});
let fieldsElement = new FieldsContent({
fieldInfos: [fieldInfo1, fieldInfo2]
});
return [fieldsElement];
});
}
But the fields aren't displayed.
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 🙂
