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
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();
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.
Greg,
And you added the first code block of html code to your Widget.html right?
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>
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?
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();
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
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.
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)"