topic Re: Busy cursor in Web AppBuilder Custom Widgets Questions

Busy cursor

GregRieck — Fri, 14 Apr 2017 17:27:29 GMT

Hello, I am using WAB 2.2 with the Jewery box theme. I would like to be able to display a busy cursor while a widget is returning results from a server call. How would I go about adding a busy cursor to my widget? Also, if the widget is closed can I release the busy cursor?

Thank You,

Greg

Re: Busy cursor

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:56:48 GMT

Greg,

I personally am not a fan out using busy cursors when you can use a busy indicator on the widget that is busy instead. To do this in many of my widget I ad this html code to the Widget.html

<div data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-attach-point="shelter" data-dojo-props="hidden:true" style="overflow:hidden;"></div>‍

as the last tag inside the widgets main div tag. and in the Widget.js I can call simple methods like:

define([
....
  'jimu/dijit/LoadingShelter',
....
function (
....
LoadingShelter,
....
){

this.shelter.show();

this.shelter.hide();‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Busy cursor

GregRieck — Fri, 14 Apr 2017 20:35:48 GMT

Robert,

Thank you for the reply. Yes that would work for me. I just want something to show that the widget is processing the request. Depending on what the user has selected it can take time to get a response back from the server.

I added the code you indicated above but I get an error - TypeError: this.shelter.show is not a function.

I'm trying to call it at specific locations within my widget just prior to a server call. I don't want it called when the widget loads because often the user needs to interact with the widget in some way to generate the server call. For example clicking on a button or changing an option dialog.

Re: Busy cursor

RobertScheitlin__GISP — Fri, 14 Apr 2017 20:57:40 GMT

Greg,

And you added the first code block of html code to your Widget.html right?

Re: Busy cursor

GregRieck — Fri, 14 Apr 2017 21:16:25 GMT

Yes, added the define and the function ref. Then inside my event I added this.shelter.show(); I even tried setting a global variable to "busycur" and that was null.

Here is my html

<div>
<div id="osproutedetails">
<select id="cbRdType" data-dojo-attach-point="cbRDType" style="width:100px" data-dojo-attach-event="onchange:cbRdType_Changed">
<option value="Term. Points" selected="selected">Term. Points</option>
<option value="Equipment">Equipment</option>
<option value="Cable Spans">Cable Spans</option>
</select>
<select id="cbRDName" data-dojo-attach-point="cbRDName" style="width:150px" data-dojo-attach-event="onchange:cbRdName_Changed"> </select>
<select id="cbRDPortsStrands" data-dojo-attach-point="cbRDPortsStrands" style="width:150px" data-dojo-attach-event="onchange:cbRDPortsStrands_Changed"> </select>
<input id="RDPatchStop" type="checkbox" name="chkStopAtPatch" value="Stopatpatch"> Stop at patch
<input id="RDShowEndsOnly" type="checkbox" name="chkShowEndsOnly" value="showendsonly"> Show Ends Only
<button id="BtnClearGraphics" data-dojo-attach-point="BtnClearGraphics" data-dojo-type="dijit/form/Button" data-dojo-attach-event="onclick:_onBtnClearGraphicsClicked">Remove Flags</button>

</div>

Re: Busy cursor

RobertScheitlin__GISP — Fri, 14 Apr 2017 21:23:19 GMT

Greg,

So it could be that the code where you are trying to call the this.shelter.show(); is out of scope then. Can you show the code for that function?

Re: Busy cursor

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:56:51 GMT

Greg,

Any time you are trying to refer to a dom element in the widgets template you must precede it with this.

this.shelter.show();
//Not
shelter.show();‍‍‍

Re: Busy cursor

GregRieck — Sat, 15 Apr 2017 04:31:37 GMT

Robert,

Even when shelter is defined as a global variable using getElementById?

Line 61

var shelter = document.getElementById("busycur");

And I added "busycur" as the id in the html statement.

I did that because this.shelter.show() was throwing the error previously mentioned.

Greg

Re: Busy cursor

RobertScheitlin__GISP — Sat, 15 Apr 2017 12:07:23 GMT

Greg,

Getting a element from the template using byId is not the standard practice when working with dojo templated widgets. You will not see esri developer using that method. I would remove the var shelter = document.getElementById("busycur"); and try again. You should have no issue getting the LoadingShelter dijit using this.shelter from the Widget.html.

Re: Busy cursor

GregRieck — Mon, 17 Apr 2017 16:05:46 GMT

Robert,

I have removed the using byId and replaced it with this.shelter.show()/hide() and I am still getting the error below.

This function is called from a Feature Action.

queryRouteDetails: function (XTable, XId) {
   switch (XTable) {
      case "fibermngr": this.selectedFibermngrId = XId; break;
      case "cable":
      case "span": this.selectedSpanId = XId; break;
   }
   this.cbRDName.length = 0;
   this.cbRDPortsStrands.length = 0;
   this.shelter.show();

//this is the call to the server
_app.getName.call(this, {

init.js:113 TypeError: this.shelter.show is not a function at Object.queryRouteDetails (Widget.js?wab_dv=2.2:213) at RouteDetailsFeatureAction.js?wab_dv=2.2:51 at h (init.js:107) at k (init.js:107) at g.resolve (init.js:109) at Object.<anonymous> (WidgetManager.js?wab_dv=2.2:634) at f.<anonymous> (init.js:63) at f.c [as onwidgetCreated] (init.js:119) at Function.h.emit (init.js:124) at Function.h.emit (init.js:125) "TypeError: this.shelter.show is not a function at Object.queryRouteDetails (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/widgets/RouteDetails/Widget.js?wab_dv=2.2:213:24) at http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/widgets/RouteDetails/RouteDetailsFeatureAction.js?wab_dv=2.2:51:20 at h (http://js.arcgis.com/3.18/init.js:107:279) at k (http://js.arcgis.com/3.18/init.js:107:205) at g.resolve (http://js.arcgis.com/3.18/init.js:109:280) at Object.<anonymous> (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js?wab_dv=2.2:634:21) at f.<anonymous> (http://js.arcgis.com/3.18/init.js:63:209) at f.c [as onwidgetCreated] (http://js.arcgis.com/3.18/init.js:119:79) at Function.h.emit (http://js.arcgis.com/3.18/init.js:124:331) at Function.h.emit (http://js.arcgis.com/3.18/init.js:125:443) ---------------------------------------- rejected at a (http://js.arcgis.com/3.18/init.js:108:174) at h (http://js.arcgis.com/3.18/init.js:107:438) at k (http://js.arcgis.com/3.18/init.js:107:205) at g.resolve (http://js.arcgis.com/3.18/init.js:109:280) at Object.<anonymous> (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js?wab_dv=2.2:634:21) at f.<anonymous> (http://js.arcgis.com/3.18/init.js:63:209) at f.c [as onwidgetCreated] (http://js.arcgis.com/3.18/init.js:119:79) at Function.h.emit (http://js.arcgis.com/3.18/init.js:124:331) at Function.h.emit (http://js.arcgis.com/3.18/init.js:125:443) at f.emit (http://js.arcgis.com/3.18/init.js:117:218) ---------------------------------------- Error at g.then.c.then (http://js.arcgis.com/3.18/init.js:110:97) at Object.onExecute (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/widgets/RouteDetails/RouteDetailsFeatureAction.js?wab_dv=2.2:32:8) at Object._clickHandler (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/jimu.js/dijit/PopupMenuItem.js?wab_dv=2.2:90:21) at HTMLDivElement.<anonymous> (http://js.arcgis.com/3.18/init.js:63:209)"

Re: Busy cursor

RobertScheitlin__GISP — Mon, 17 Apr 2017 16:30:46 GMT

Greg,

Based on that error you are now trying to show the shelter inside the RouteDetailsFeatureAction.js, which does not have a this.shelter (as that is part of the widgets code scope and not the separate RouteDetailsFeatureAction code scope).

If you are going to go this route then you need to somehow feed the RouteDetailsFeatureAction.js a reference to the widget object itself.

Re: Busy cursor

GregRieck — Mon, 17 Apr 2017 17:14:36 GMT

Robert,

Interesting, there is a FeatureAction that calls the queryRouteDetails. But queryRouteDetails is inside the widget.js, not in the feature action itself. I will look into passing the shelter as an object to queryRouteDetails.

Greg