Community

Busy cursor

1733
11
04-14-2017 10:27 AM
GregRieck
by
Occasional Contributor III
‎04-14-2017 10:27 AM

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

0 Kudos
11 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-14-2017 11:27 AM

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();‍‍‍‍‍‍‍‍‍‍‍‍‍
GregRieck
by
Occasional Contributor III
‎04-14-2017 01:35 PM

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. 

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-14-2017 01:57 PM

Greg,

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

0 Kudos
GregRieck
by
Occasional Contributor III
‎04-14-2017 02:16 PM

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>
<!--<input type="checkbox" name="chkShowRunTime" value="Showruntime">Show run time
<button name="btnOptions">Options...</button>
<button name="btnExport">Export</button>-->
</div>

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-14-2017 02:23 PM

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?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-14-2017 05:33 PM

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();‍‍‍
0 Kudos
GregRieck
by
Occasional Contributor III
‎04-14-2017 09:31 PM

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-15-2017 05:07 AM

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.

0 Kudos
GregRieck
by
Occasional Contributor III
‎04-17-2017 09:05 AM

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=...) at http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/widgets/RouteDetails/RouteDetailsFeatu... 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:63...) 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:63...) 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/RouteDetailsFeatu...) at Object._clickHandler (http://esritest.esri.ospinsight.com:3344/webappbuilder/apps/2/jimu.js/dijit/PopupMenuItem.js?wab_dv=...) at HTMLDivElement.<anonymous> (http://js.arcgis.com/3.18/init.js:63:209)"

0 Kudos