Community

Popup contents function not being called

551
3
03-25-2019 06:36 AM
Abbey_Roelofs
by
New Contributor II
‎03-25-2019 06:36 AM

I'm trying to use a function to populate part of the contents of my popup, similar to the example shown here, but the function isn't being called--the popup just displays whatever field I attempt to pass to the function. My popup template code (very much simplified at this point, to determine if it's even being called) is shown below. I would expect the popup to contain the text "Put this in the popup " and the species field value, but all I'm seeing is the species field value. If I change 'species1' to another field in the content section, that field's value will be shown instead.

Any thoughts on what could be going wrong here would be much appreciated.

let getHeaderExpr = function(value,key,data){
    let textStr = "Put this in the popup " + value;
    return textStr;
};

let specimenPopup = new PopupTemplate({
    title: "Species: {species1}", 
    content: "{species1:getHeaderExpr}" 
});
layer = new FeatureLayer({
    url: layerPointsUrl,
    visible: false,
    renderer: specimenRenderer,
    popupTemplate: specimenPopup
});
0 Kudos
3 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎03-25-2019 06:53 AM

Abbey,

   The difference is that your function is scoped locally and in the sample you are referring to the function is scoped Globally (line 2):

<script>
    var populationChange;
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/Layer"
      ],
      function(
        Map, MapView, Layer
      ) {
        var map = new Map({
          basemap: "dark-gray"
        });

...

populationChange = function(value, key, data) {
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Yours needs to mimic this:

<script>
    let getHeaderExpr;
    require([
        "esri/Map",
...

getHeaderExpr = function(value,key,data){‍‍‍‍‍‍‍‍
0 Kudos
Abbey_Roelofs
by
New Contributor II
‎03-25-2019 07:57 AM

Thanks for your quick response. Unfortunately, I did initially try it with global scoping and had the same results. Any other thoughts?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎03-25-2019 08:34 AM

Abbey,

   There must be something else wrong in your code then as this works fine for me:

<!DOCTYPE html>
<html>
<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 - 4.10</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    var getHeaderExpr;
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/Layer"
      ],
      function(
        Map, MapView, Layer
      ) {
        var map = new Map({
          basemap: "dark-gray"
        });

        // Create the MapView
        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 7,
          center: [-87, 34]
        });

        Layer.fromPortalItem({
            portalItem: { // autocasts as new PortalItem()
              id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
            }
          })
          .then(function(layer) {
            // add the layer to the map
            map.add(layer);

            // create a new popupTemplate for the layer
            // format the numeric field values using out of the box
            // NumberFormat function. Call populationChange() custom
            // function to calculate percent change for the county.
            var popupTemplate = { // autocasts as new PopupTemplate()
              title: "Population in {NAME}",
              content: "{POP2013:getHeaderExpr}"
            };

            layer.popupTemplate = popupTemplate;

            getHeaderExpr = function(value, key, data) {
              let textStr = "Put this in the popup " + value;
              return textStr;
            }
          });
      });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos