Php versions – ArcGIS Javascript API 4.14 popup field attributes not showing

I am using webamp to show the map created in ArcGIS (Javascript API in PHP website). In the map, a popup also appears when clicking on the layer’s points. Recently I have updated the version 4.14 from 4.13. After updating it, the popup is not working properly. I have a custom popup template. After research in the documentation, I came to know there required a return function to show the custom div on the popup. The below code I have added to show my custom popups.

var template = { content: function(){ var div = document.createElement("div"); div.className = "myClass"; div.innerHTML = "<span>My custom content!</span>"; return div; } }

layers[layerIndex].popupTemplate = template;

Now the popup appears fine. But I have to show the field values on the popup. I have used the required field attributes in double brackets eg: {Name}. But in the latest version, the field values are not appearing when I used the same.

The code I have used in version 4.13 and it was working,

popupTemplate = {
title: "{Name}",
content: '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>' };

layers[layerIndex].popupTemplate = popupTemplate;

Please help me to fix this issue.

Thanks.

The complete code for the Webmap and custom popup
map.js

// The map classes and includ1a65d527bfd04cc180c87edf0908907bes
require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/widgets/Search",
  "esri/widgets/Zoom",
  "esri/widgets/Locate"
], function(MapView, WebMap, Search, Zoom, Locate) {
  var webmap = new WebMap({
    portalItem: {
      id: "d1ca798d8c7d4afab8983d911df8326b"
    }
  });

  var view = new MapView({
    map: webmap,
    container: "map",
    center: [-95.9406, 41.26],
    zoom: 16,
    maxZoom: 21,
    minZoom: 13,
    basemap: "topo",

    ui: {
      components: ["attribution"]
    }
  });

  webmap
    .load()
    .then(function() {
      return webmap.basemap.load();
    })
    .then(function() {
      let allLayers = webmap.allLayers;
      console.log(allLayers);

      var promises = allLayers.map(function(layer) {
        return layer.load();
      });
      return Promise.all(promises.toArray());
    })
    .then(function(layers) {
      // Position of the popup in relation to the selected feature.
      view.popup.alignment = "top-center";
      // To disable the collapse functionality
      view.popup.collapseEnabled = false;
      // A spinner appear at the pointer
      view.popup.spinnerEnabled = false;
      // To disable the dock (The popup will be appear in bottom or any corner of the window)
      view.popup.dockEnabled = false;
      // Disable the pagination
      view.popup.featureNavigationEnabled = false;
      // Popup template details, Keep only name and address in the popup and avoid all other details
      view.popup.viewModel.actions.getItemAt(0).visible = false;

      // view.on("click", function(event) {
      // keep a delay to align the popup and the pointer together positioned to the map center
      // Add animation only if the browser not IE
      // });

      layers.forEach(function(popupLayers, layerIndex) {
        console.log(popupLayers);

        var template = {
          title: "{Name}",
          content: function() {
            var div = document.createElement("div");
            div.className = "myClass";
            div.innerHTML = "<span>{Address}</span>";
            return div;
          }
        };
        layers[layerIndex].popupTemplate = template;

        // popupTemplate = {
        //   title: "{Name}",
        //   content:
        //     '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>'
        // };
        // layers[layerIndex].popupTemplate = popupTemplate;
      });

      // To close the popup when hit on esc button
      document.onkeyup = function(evt) {
        var key = evt.keyCode;
        if (key == 27) {
          view.popup.close();
        }
      };
    })
    .catch(function(error) {
      //   console.log(error);
    });
});

Index.php

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

<title>Load a basic WebMap - 4.14</title>

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

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.14/"></script>
<script src="map.js"></script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

I have modified the code,

 for (let i = 2; i < layers.length; i++) {
        var template = {
          title: "{Name}",
          content: function() {
            var div = document.createElement("div");
            div.innerHTML =
              '<div id="popup_address">{Address}</div><div class="right"><div href="#" id="popupRight" class="toggle"><p onClick="openPopupDetails({FACILITYID})">+</p></div></div>';
            return div;
          }
        };
        layers[i].popupTemplate = template;
        console.log(layer[i]);
      }

When I apply custom div, the {Address} part is not rendering. It appears like {Address} itself.