Popup contents function not being called

Question

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
});

RobertScheitlin__GISP · Answer

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Abbey_Roelofs · Answer

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

RobertScheitlin__GISP · Answer

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){‍‍‍‍‍‍‍‍