topic Re: Custom widget with custom popup in ArcGIS Web AppBuilder Questions

Custom widget with custom popup

AndrewTerwiel — Sat, 11 Dec 2021 20:36:42 GMT

I'm trying to assign a custom popup to the map.infowindow in a custom widget, but when I do this I receive a console error saying "cannot read property 'toScreen' of undefined at p.show". Here is my code:

_customPopup: new Popup({
  fillSymbol: this._sfsParcel,
  highlight: true,
  lineSymbol: this._slsRoad,
  markerSymbol: this._smsPoint
}, domConstruct.create("div")),


postCreate: function () {
  this.inherited(arguments);
  this._config = this.config;
  this.map = this.map;
  this.map.infoWindow = this._customPopup;
},

Does anyone see what could be wrong here?

Re: Custom widget with custom popup

RobertScheitlin__GISP — Wed, 11 Nov 2015 03:30:43 GMT

Andrew,

I think post create is to early in the widgets life cycle try startup instead

Re: Custom widget with custom popup

AndrewTerwiel — Wed, 11 Nov 2015 03:51:21 GMT

Hi Robert,

Moving the code to startup didn't work. Same error as before.

Re: Custom widget with custom popup

RobertScheitlin__GISP — Wed, 11 Nov 2015 15:05:35 GMT

Andrew,

I need to see your full widget code can you zip it up and attach, so I can look into this. I have seen at least one other person talk about this but I have not run into this myself.

Re: Custom widget with custom popup

AndrewTerwiel — Wed, 11 Nov 2015 21:06:53 GMT

Here you go, Robert. Thanks for looking into this.

Re: Custom widget with custom popup

RobertScheitlin__GISP — Wed, 11 Nov 2015 23:35:28 GMT

Andrew,

Where is Bloodhound coming from in your code? I don't see a require for it. I also don't see how you are loading jQuery.

Re: Custom widget with custom popup

AndrewTerwiel — Sat, 11 Dec 2021 20:36:45 GMT

Bloodhound is included in typeahead.bundle.min.js which is in \stemapp\libs\storejs and loaded by \stemapp\libs\main.js which has this code:

define(["./usng/usng"
  , "./storejs/json"
  , "./storejs/store"
  , "./storejs/bootstrap.min"
  , "./storejs/typeahead.bundle.min"
  ]
, function(){
});

jquery-2.1.4.min.js is in \stemapp\libs and is loaded by \stemapp\init.js which contains this code:

resources = resources.concat([
   window.apiUrl + 'dojo/resources/dojo.css',
   window.apiUrl + 'dijit/themes/claro/claro.css',
   window.apiUrl + 'esri/css/esri.css',
   window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',
   window.path + 'jimu.js/css/jimu-theme.css',
   window.path + 'libs/npdccss/typeahead.css',
   window.path + 'libs/npdccss/bootstrap.min.css',
   window.path + 'libs/npdccss/bootstrap-theme.min.css',
   window.path + 'libs/jquery-2.1.4.min.js'
]);

This discussion describes how I came to use these methods of loading other libraries.

Uncaught Error: Bootstrap's JavaScript requires jQuery

Re: Custom widget with custom popup

RobertScheitlin__GISP — Thu, 12 Nov 2015 03:53:15 GMT

Andrew,

OK, I will look into that. Can you do a console.info on the this.map object and see if it is actually a map object. I seem to think that the other time I saw this the person was using several third party libraries. I wonder if they could be interfering with the widgets this.map.

Re: Custom widget with custom popup

AndrewTerwiel — Thu, 12 Nov 2015 20:09:15 GMT

Yes, console.info shows that this.map is a map object.

Re: Custom widget with custom popup

AndrewTerwiel — Sat, 11 Dec 2021 20:36:48 GMT

Hi Robert,

It might have been me that you are referring to when you talk about the person using the 3rd party libraries.

Changing the code I've posted above to this below fixes the error.

//this.map.infoWindow = this._customPopup;
this.map._mapParams.infoWindow = this._customPopup;

I know we should avoid the underscored objects, but it works.

Re: Custom widget with custom popup

RobertScheitlin__GISP — Wed, 18 Nov 2015 23:20:59 GMT

Andrew,

Strange but at least it works for you for now.