topic Re: Modify a webmap's InfoWindow with javascript in WAB in Web AppBuilder Custom Widgets Questions

Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Wed, 05 Aug 2020 14:36:27 GMT

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

Re: Modify a webmap's InfoWindow with javascript in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:37:09 GMT

David,

LayerStructure getNodeById is the right path but once you have the node you need to use the getLayerObject() method on the node before you have an actual FeatureLayer.

 this.layerStructure = LayerStructure.getInstance();
 var featureLayer = this.layerStructure.getNodeById(subLayerID).getLayerObject();
 featureLayer.infoWindow = popupTemplate‍‍‍‍‍‍

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Thu, 06 Aug 2020 14:14:50 GMT

Robert,

Probably i should quit my job, because i'm stupid, i tried, googled, read for hours without success,

I don't return my feature layer, maybe that's my problem. Please, show my more info.

featureLayer's console log:

"Error at Object._getLayerObject (/jimu.js/LayerInfos/LayerInfoForDefaultService.js?wab_dv=2.15:187:17) at Object.getLayerObject (/jimu.js/LayerInfos/LayerInfoForDefaultService.js?wab_dv=2.15:208:19) at Object.getLayerObject (/jimu.js/LayerNode.js?wab_dv=2.15:200:30) at Object.startup (/widgets/CustomPopup/Widget.js?wab_dv=2.15:178:40) at Object.advice (https://js.arcgis.com/3.31/init.js:121:101) at Object.c [as startup] (https://js.arcgis.com/3.31/init.js:120:393) at Object.openWidget (/jimu.js/WidgetManager.js?wab_dv=2.15:540:18) at Object.<anonymous> (/jimu.js/layoutManagers/BaseLayoutManager.js?wab_dv=2.15:208:32) at https://js.arcgis.com/3.31/init.js:64:337 at m (https://js.arcgis.com/3.31/init.js:108:248)"

Re: Modify a webmap's InfoWindow with javascript in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:37:12 GMT

David,

It sounds like the "subLayerID" you are searching for is returning null. Have you done a simple test like this:

console.log(this.layerStructure.getNodeById(subLayerID));‍

If you are not getting a null from getNodeById and you are actually getting the node object back then you can try this code to get to the layer object from the node:

var foundLayer = this.layerStructure.getNodeById(subLayerID);
// if(foundLayer !== 'undefined') {
if(foundLayer) {
  var featureLayer = foundLayer._layerInfo.layerObject;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Modify a webmap's InfoWindow with javascript in WAB

CarlosNantes — Thu, 06 Aug 2020 17:57:28 GMT

Time is necessary to master any tecnology, frustration is part of the process. I have struggled with this same problem a while ago. Here is a snippet you can copy and paste in google chrome developer console to see it working. The web appbuilder application must be opened in the browser tab for you to try this.

I think this part of the api is really missing some docs. LayerStructure module uses LayerInfos behind the scenes. The sample code uses LayerInfos module directly.

var LayerInfos = require('jimu/LayerInfos/LayerInfos');

var InfoTemplate = require('esri/InfoTemplate');

function getWebmapOperationalLayerById (layerId) {

var instance = LayerInfos.getInstanceSync();

var layerFound = null;

instance.traversalLayerInfosOfWebmap(function (aLayer) {

if (aLayer.id === layerId) {

layerFound = aLayer;

return; //get out of traversalLayerInfosOfWebmap()

}

});

return layerFound;

}

function modifyInfoTemplate( layerObject) {

var title = 'Popup title';

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

layerObject.infoTemplate = new InfoTemplate(title, content);

}

var layerId = 'YOUR_LAYER_ID_HERE';

var operationalLayer = getWebmapOperationalLayerById(layerId);

operationalLayer.getLayerObject().then(modifyInfoTemplate);

It is important to use operationalLayer.getLayerObject() method (instead of accessing directly operationalLayer.layerObject), because sometimes layerObject is not loaded and will be empty. getLayerObject() will assure the object is loaded before you modify infotemplate.

To find a layerId you can use _viewerMap._layers in chrome developer console to see what's in there.

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Thu, 06 Aug 2020 18:08:41 GMT

Sorry for the delay, i just finished work, when you answered.

I get back a layernode:

id: "alallomas_9075_0"
map: {_plugins: {…}, _internalLayerIds: Array(1), _layers: Array(0), _layerDivs: Array(0), _basemapPending: false, …}
subId: 0
title: "Alállomás"
_layerInfo: {originOperLayer: {…}, layerObject: {…}, map: {…}, title: "Alállomás", id: "alallomas_9075_0", …}
__proto__: Object

and now an object also as the featurelayer. but its not so right.

JSON.stringify(featureLayer) // {"url":"https:/webserver.local/arcgis/rest/services/alallomas/MapServer/0","empty":true}

I have no clue why it is empty.

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Thu, 06 Aug 2020 18:35:35 GMT

Thanks for the snippet!

I got back a circular object, but after getLayerObject method, it became the same empty promise.

WAB env. is not for the beginners but i won't give up!

Re: Modify a webmap's InfoWindow with javascript in WAB

RobertScheitlin__GISP — Thu, 06 Aug 2020 18:45:18 GMT

David,

I almost seems like you are trying to a featurelayer object from a sublayer of a ArcGISDynamicMapServiceLayer. If that is the case then that is the issue.

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Thu, 06 Aug 2020 18:50:31 GMT

Totally right! Are there any methods to deal with them? Sorry, that i didn't know that this is a big difference. i tought a sublayer is a featurelayer. Services served from arcmap mxd-s contain featurelayers..

Re: Modify a webmap's InfoWindow with javascript in WAB

CarlosNantes — Thu, 06 Aug 2020 19:19:51 GMT

Based on your json output, and knowing it is a ArcGISDynamicMapServiceLayer, the snippet should work if you try:

var layerId = 'alallomas_9075';

var operationalLayer = getWebmapOperationalLayerById(layerId);
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);

});

})

In ArcGISDynamicMapServiceLayer, infotemplates are stored in a different way.

The id alallomas_9075_0 means: alallomas is the mapserver name, 9075 is (probably) a random number and 0 is the sublayerId. This is not documented, by the way....

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Thu, 06 Aug 2020 20:15:59 GMT

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)

}

});

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Tue, 24 Nov 2020 15:46:16 GMT

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

Re: Modify a webmap's InfoWindow with javascript in WAB

DávidGregor — Tue, 24 Nov 2020 20:39:32 GMT

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.