Displaying all attributes on click for features in Map Image Layers (JS 4.24)

[moremeowbell]

I am using the ESRI JS 4.24 API to create a mapping application that pulls in a Map Image Layer that is hosted on ArcE Portal. I am having trouble getting attributes to show in my pop-up. I would like to display all attributes in the pop-up, not just a select few.

According to documentation the 

outFields: ["*"]

has been replaced with

defaultPopupTemplateEnabled: true

However, I am getting no content in my pop-up at the moment. Here's what I'm looking at currently:

Here is my code currently, any suggestions are welcome!

require([
  "esri/config",
  "esri/WebMap",
  "esri/views/MapView",
  "esri/widgets/AreaMeasurement2D",
  "esri/widgets/Compass",
  "esri/widgets/Home",
  "esri/widgets/LayerList",
  "esri/widgets/ScaleBar",
  "esri/widgets/Search",
  "esri/widgets/BasemapToggle",
  "esri/widgets/Legend",
  "esri/widgets/Expand",
  "esri/core/reactiveUtils",
  "esri/widgets/Popup",
  "esri/Map",
  "esri/layers/MapImageLayer",
  "esri/PopupTemplate",

], function (esriConfig, WebMap, MapView, AreaMeasurement2D,
  Compass, Home, LayerList, ScaleBar, Search, BasemapToggle,
  Legend, Expand, reactiveUtils, Popup, Map, MapImageLayer,
  PopupTemplate) {

  esriConfig.portalUrl = "PORTAL_URL";

  const map = new Map({
    basemap: "gray-vector"
  });

  const view = new MapView({
      map: map,
      container: "viewDiv",
      center: [-95, 40],
      zoom: 4,
  });
 
  
  let layer = new MapImageLayer({
    portalItem: {
      id: "1acc2c72f17f44b0bd47ca31f63c9a95",
  },

  });
  map.add(layer);

  layer.when(() => {
    layer.allSublayers.forEach((sublayer) => {
        sublayer.popupEnabled = true;
        sublayer.popupTemplate = { 
          defaultPopupTemplateEnabled: true,    
          outFields: ["*"],                   
        }
    });
});

[Noah-Sager]

Hi @moremeowbell, unfortunately, MapImageLayer does not support defaultPopupTemplateEnabled.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#defaultPopupTe...

We have this on our roadmap for a future release, but currently, the workaround would be to create a FeatureLayer from each Sublayer to use defaultPopupTemplateEnabled.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-Sublayer.html#crea...

I suppose the other option would be to loop through all the fields for each Sublayer once you're using the flattened collection with allSublayers and add those to the popup. 

[moremeowbell]

@Noah-Sager 

I've been able to iterate and flatten the collection, however, when I try calling Fields I'm getting a "null" and "undefined." For proof on concept, I've just been trying to call fields[0] to populate a pop-up. Do you know why it wouldn't be grabbing the field attributes? Here is the documentation I am currently following:

// print the first Sublayer's first field to the console
console.log(mapImageLayer.sublayers.items[0].fields[0]);

// OUTPUT:
alias: "OBJECTID"
defaultValue: undefined
description: "the objectid"
domain: null
editable: false
length: -1
name: "objectid"
nullable: false
type: "oid"
valueType: null

[JayakumarPD]

I had the same challenge but with one map service layer, I applied like this

in the feature layer constructed from client side features, I have added the bellow code

outFields: ["*"],
// these are the fields, which i got from client side features
      fields:[{name:"KGISDistrictCode", alias:"KGISDistrictCode", type:"string"},
              {name:"KGISDistrictName", alias:"KGISDistrictName", type:"string"},
              {name:"MalePopulation", alias:"MalePopulation", type:"integer"},
              {name:"FemalePopulation", alias:"FemalePopulation", type:"integer"},
              {name:"TotalPopulation", alias:"TotalPopulation", type:"integer"}
      ],
// I have assigned the above to objectIdField
      objectIdField: "fields",
      renderer: districtRenderer5,
      popupTemplate: popupDistrict1,
// in popup template, called this like this
 const popupDistrict1 = {
      title: "The Stats",
      content: `<b>DisstrictCode:</b> {KGISDistrictCode} <br> 
                <b>DistrictName: </b> {KGISDistrictName} <br>`
    };

Will it be helpful