nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Version 4.15 -> 4.16+ PopupTemplate error

YimYean

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

Finde mehr Beiträge mit dem Tag

Accepted answers

UndralBatsukh

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

All comments

YimYean

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 🙂

UndralBatsukh

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

YimYean

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.

UndralBatsukh

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.

function getPopupTemplate(displayTitle) {
  const template = {
  title: displayTitle,
  content: function (target) {
    const fields = [{
      "fieldName": "Street",
      "label": "Street",
     }];
     let fieldsElement = new FieldsContent({
       fieldInfos: fields
     });
     return [fieldsElement];
    },
  }
  return template;
}

YimYean

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>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.