Click on Map Popup Doesnt Work After Upgrade in WAB

[joerodmey]

Hi,

I have a WAB app with some modified code. I've been running this code in WAB V2.8 for awhile without issue and need to upgrade to V2.13. This code has failed in V2.13

This code allows the user to click on the map, coordinates are collected, popup is shown with URL link to Survey123. Right now it does everything but show the popup.

I will include the code below which sits in server->apps->2->jimu.js->MapManager.js-> in the publish map event function:

_publishMapEvent: function(map) {
        
		topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible && layer.title=='t_Main_Floor'||layer.title=='t_Mezz_Floor'){
            this.SERVICE_ID = layer.title;
          }
        }));
		
		// create node for the tooltip
          var tip = "Click on problem location";
          var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
          dojo.style(tooltip, "position", "fixed");
		  
		  
		     // update the tooltip as the mouse moves over the map
          dojo.connect(map, "onMouseMove", function(evt) {
            var px, py;        
            if (evt.clientX || evt.pageY) {
              px = evt.clientX;
              py = evt.clientY;
            } else {
              px = evt.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
              py = evt.clientY + dojo.body().scrollTop - dojo.body().clientTop;
            }
                           
            // dojo.style(tooltip, "display", "none");
            tooltip.style.display = "none";
            dojo.style(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
            // dojo.style(tooltip, "display", "");
            tooltip.style.display = "";
            // console.log("updated tooltip pos.");
          });

          // hide the tooltip the cursor isn't over the map
          dojo.connect(map, "onMouseOut", function(evt){
            tooltip.style.display = "none";
          });
		  
		
		//add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
     
	  
	     require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ],
		lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
         SimpleMarkerSymbol.STYLE_CIRCLE, 0.01,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_CIRCLE,
            new Color([207, 16, 45, 0.9]),
            1
          ),
          new Color([207, 16, 45, 0.9])
        );
		
          map.on("click", lang.hitch(this, function(evt){
            var gra = new Graphic(evt.mapPoint, symbol);
            setTimeout(lang.hitch(this, function(){
              var selFeats = map.infoWindow.features;
              if(!selFeats){
                map.graphics.clear();
                map.graphics.add(gra);
				
				//PopupCenter('http://www.xtf.dk','xtf','900','500');  
				
				
				
                map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/surveyID?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split('_')[1]+"_Floor " + '" target="_"><font size="4">Click here to submit </font></a>');
				
				SERVICE_ID: null;
				
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        })); 
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[joerodmey]

Copied exactly and popup works but when I click on map the popup doesn't show. in the console the there are a few warnings but only one error is: "TypeError: this.SERVICE_ID is undefined". This shows every time I click on the map.

[RobertScheitlin__GISP]

Joe,

   So like my previous question. Where in your code are you defining this.SERVICE_ID? I have it defined at the beginning of the MapManager code along with the other this vars.

[joerodmey]

In V2.8 it was taking the current layer (Main or Mezz) floor that was active at the time via the toggle. When main was selected the code should be main (which passed into the Survey123 link) and mezz if that floor was toggled on. It worked fine in V2.8

[joerodmey]

All I did was defined a value for Service_ID from the start and now it works fine

[RobertScheitlin__GISP]

Joe,

   So it sounds like the "toggleChanged" event is not firing and that event is dependent on my LayerToggle widget. In your 2.13 project are you using the LayerToggle widget and is it set to open at start? 

[RobertScheitlin__GISP]

Joe,

   So do you have the Layer Toggle Widget in your 2.13 app?

[joerodmey]

Yes I do

[RobertScheitlin__GISP]

And is it set to open at start for one of those two layers you are listening for?

[joerodmey]

Yes