How to add generic popup templates for all FeatureLayers in all MapImageLayers in a map

PeterK

Not a question but hopefully this will help someone who was struggling with the same issue.  The code below will add generic popupTemplates for all FeatureLayers in all MapImageLayers in a map.  This code should be run after you have added all of your layers to a map.  If someone can figure out how to expand this to include RasterLayers (if that is possible) that would be fantastic.  Since I'm still in the learning phase, any improvements or feedback would be appreciated.

require([
    "esri/config"
    , "esri/Map"
    , "esri/views/MapView"
    , "esri/layers/ImageryLayer"
    , "esri/layers/FeatureLayer"
    , "esri/identity/IdentityManager"
    , "esri/layers/MapImageLayer"
    , "esri/support/actions/ActionButton"
    , "esri/core/Collection"
    , "esri/geometry/Extent"
    , "esri/Basemap"]
    , function (
        esriConfig
        , Map
        , MapView
        , ImageryLayer
        , FeatureLayer
        , esriId
        , MapImageLayer
        , ActionButton
        , Collection
        , Extent
        , identify
        , IdentifyParameters
        , PopupTemplate
        , FieldInfo
        , Basemap
    ) {

        const arcgisMap = document.querySelector("arcgis-map");

        arcgisMap.addEventListener("arcgisViewReadyChange", (event) => {
            arcgisMap.map.addMany(['Add you MapImageLayers here...']);

            arcgisMap.map.layers.map(layer => {
                layer.load().then(function (layer) {
                    layer.sublayers.forEach(sublayer => {
                        sublayer.load().then(function (loadedSubLayer) {
                            var template = { type: "fields", fieldInfos: [] };
                            if (loadedSubLayer.fields != null) {
                                loadedSubLayer.fields.forEach((field) => {
                                    if (field.name.toLowerCase() != 'shape') {
                                        template.fieldInfos.push({ fieldName: field.name, label: field.name, isEditable: false, tooltip: "", visible: true, format: null, stringFieldOption: "text-box" });
                                    }
                                });
                                loadedSubLayer.popupEnabled = true;
                                loadedSubLayer.popupTemplate = {
                                    title: layer.title + ': ' + loadedSubLayer.title,
                                    content: [template]
                                }
                            }
                        });
                    });
                });
            });
        });
    });

  

UndralBatsukh

Hi there, 

You need to load all sublayers from the MapImageLayer by calling loadAll() on the MapImageLayer instance as shown below:

layer.loadAll().then(() => {
  layer.sublayers.map((sublayer) => {
    sublayer.popupTemplate = sublayer.createPopupTemplate();
  });
 });

This codepen shows how to setup popupTemplate for sublayers - https://codepen.io/U_B_U/pen/QwbrLXO?editors=100

Hope this helps,

-Undral