topic Re: bootstrap modal problem in WAB in Web AppBuilder Custom Widgets Questions

bootstrap modal problem in WAB

scottmiller10 — Tue, 05 Jun 2018 16:54:17 GMT

I am having a problem with the bootstrap modal as well. The open modal budget is on the widget, but when I click nothing happens. I've tried using the <a href...> as well the bootstrap button with data-toggle, but neither works. I attached the widget and html files below.

Re: bootstrap modal problem in WAB

Adri2cPérez_Beneito — Tue, 05 Jun 2018 17:35:12 GMT

Hi!

I kindly recommend using the Dialog Dijit class. In this way you avoid overloading your application with external dependencies..

Best

Re: bootstrap modal problem in WAB

RobertScheitlin__GISP — Tue, 05 Jun 2018 17:39:41 GMT

Scott,

So there are many issues in your code.

You do not add script tags and stylesheets inside the widget.html. You are treating the widgets html template like it was a whole html app and not just a markup template as it is suppose to be.
Your define array order is mixed up. dojo/domReady! is Always the last item in the array. Because you have it as the 4th from last your Legend and LayerInfos classes is not defined properly.
You are trying to do A LOT of your coding inside the postCreate. While this is allowed you might reconsider the widgets life cycle and determine if postCreate is the most appropriate location for all of that.
I would not even be considering using BootStrap modal. WAB and dojo has options for dialogs and modal so why convolute your code with Another 3rd party library?

Re: bootstrap modal problem in WAB

scottmiller10 — Fri, 08 Jun 2018 17:35:21 GMT

Robert,

Where should I put onClick functions if not in postCreate? By no means do I fully understand the structure of these widgets, so I appreciate your feedback greatly. The only reason I'm using bootstrap is to make my app look a little more phone-friendly.

Re: bootstrap modal problem in WAB

RobertScheitlin__GISP — Fri, 08 Jun 2018 17:53:19 GMT

Scott,

postCreate function will be OK if you want the map click handler added as soon as the widget is created. Many time I will wait for the user to activate a button or the widget to be opened before adding an event like this. A more significant issue is that the map click handler is not removed once your widget is closed.

Re: bootstrap modal problem in WAB

scottmiller10 — Fri, 08 Jun 2018 19:07:31 GMT

Robert,

Is there any way I could have an onClick that zooms in 10%? I can't find any function in the API to zoom by %.

Re: bootstrap modal problem in WAB

RobertScheitlin__GISP — Fri, 08 Jun 2018 19:20:26 GMT

Scott,

this.map.extent.expand(1.1); zooms in 10%

https://developers.arcgis.com/javascript/3/jsapi/extent-amd.html#expand

Expands the extent by the factor given. For example, a value of 1.5 will be 50% bigger.

Re: bootstrap modal problem in WAB

scottmiller10 — Fri, 08 Jun 2018 19:37:26 GMT

on(this.zoomIn, "click", lang.hitch(this, function(){
this.map.extent.expand(1.1);
}));

this didn't work but doesn't throw any errors. Am i using this wrong?

Re: bootstrap modal problem in WAB

RobertScheitlin__GISP — Fri, 08 Jun 2018 19:39:07 GMT

Scott,

Sorry Use.

this.map.setExtent(this.map.extent.expand(1.1));

Re: bootstrap modal problem in WAB

scottmiller10 — Fri, 08 Jun 2018 20:16:00 GMT

Hey Robert,

For some reason that isn't working either. Is there anything else i could do with map.getZoom and map.setZoom?

Re: bootstrap modal problem in WAB

scottmiller10 — Fri, 08 Jun 2018 20:22:25 GMT

var z = this.map.getZoom();
z += (z/10);
z = Math.round(z);
this.map.setZoom(z);

This worked, sorry for bugging you.