Modify a webmap's InfoWindow with javascript in WAB

[DávidGregor]

I made a custom popup for a specific layer. But my method is really not good for Web Appbuilder/WebMap environment.

Section from the customPopup widget:

      map = new Map("map", {

        infoWindow: infoWindow,

      });

      //create a popup to replace the map's info window

      var infoWindow = new InfoWindow({

        domNode: domConstruct.create("div", null, dom.byId("map")),

      });

      var popupTemplate = new InfoTemplate();

      popupTemplate.setContent(_getTextContent);

      var featureLayer = new FeatureLayer(substationURL, {

        mode: FeatureLayer.MODE_SNAPSHOT,

        infoTemplate: popupTemplate,

        outFields: ["*"],

      });

      this.map.addLayer(featureLayer);

  featureLayer.on('load', lang.hitch(this, function() {

          console.log("load");

          LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(this, function(layerInfos) {

            var featureLayerInfo = layerInfos.getLayerInfoById(featureLayer.id);

            featureLayerInfo.title = 'Title';

            }));

This way, i have to remove the layer from the webmap to avoid duplication. 

I would rather modify programmatically the original layer's infoWindow. But i cannot find any documentation for this.

How can i reference existing objects? Every tutorial or sample creates new ones...

I tought something like this will work:

      this.layerStructure = LayerStructure.getInstance();

      var featureLayer = this.layerStructure.getNodeById(subLayerID);

      featureLayer.infoWindow = popupTemplate

[DávidGregor]

Thank you so much! It was not working because the infotemplate is infoTemplate  But finally we (you two) solved the case here

Just for the record:

      function getWebmapOperationalLayerById (layerId) {

        var instance = LayerInfos.getInstanceSync();

        var layerFound = null;

        instance.traversalLayerInfosOfWebmap(function (aLayer) {

            if (aLayer.id === layerId) {

                layerFound = aLayer;

                console.log("found")

                return; //get out of traversalLayerInfosOfWebmap()

            }

        });

        return layerFound;

      }

      var layerId = 'LayerID';  

      var operationalLayer = getWebmapOperationalLayerById(layerId);

      console.log(operationalLayer)

      operationalLayer.getLayerObject().then(function(layerObject){

        var title = 'Popup title';

        var content = 'Custom description. You can use HTML here. <br> And access attribute value like this ${SOME_ATRIBUTE}';

        var sublayerId = 0;

        if(!layerObject.infotemplates){

          layerObject.infoTemplates = {};

        }

        layerObject.infoTemplates[sublayerId]= {

        infoTemplate: new InfoTemplate(title, content)

        }

      });

[DávidGregor]

Do you have any tricks here to leave the related records section untouched when i'm resetting the infotemplate object?

[DávidGregor]

I could use the PopupManager.js's methods to call the RelatedRecordsPopupProjector.js after the new infotemplate creation. Just it's needed to add the esriViewPopup class to the popup div.