Add loading icon to custom widget (like url) in panel

2038
9
Jump to solution
07-01-2020 09:54 AM
MichaelLev
Occasional Contributor III

I need to add loading icon (gif) to an in-panel Web Appbuilder custom widget, which like "Url Link Button" widget, does not have an explicit html file.

I saw a solution by Robert Scheitlin in this blog in url  

Add loading icon to url button custom widget 

I tried, but it turns that esri/dijit/util/busyIndicator is not available anymore in javascript API 4.15 ...

I saw a 2nd approach by Robert Scheitlin in this blog in url  

Show loading message while the widget is doing operations 

but it does not operate for me either. no errors, but does not work...

perhaps I am missing something...

I'm attaching zip of my widget.js

Help will be greatly appreciated, since I'm new to the subject and got stucked.

2nd question - when I upload a big file to Amazon (e.g. 45 mb), it fails. Maybe it is because the code

setTimeout(lang.hitch(this, function () {
this.isOpening = false;
WidgetManager.getInstance().closeWidget(this);
}), 300);

which I copied but indeed I don't understand it enough. An explanation will be appreciated, even if it has nothing to do with the failure to upload.

0 Kudos
1 Solution

Accepted Solutions
MichaelLev
Occasional Contributor III

Dear Robert,

Thaks to your explanations concerning LoadingShelter class, here and in other plaves, I managed to do it, and I want to explain what I did, since my 3d custom widget is in-panel and does not have an explicit html file, so in postCreate I had to place it versus the map (and not versus the widget node), as follows:

 

postCreate: function () {
this.inherited(arguments);
this.shelter = new LoadingShelter({
hidden: true
});

/* next line is important since widget does not have a nice independent html file */
this.shelter.placeAt(/*this.domNode*/ document.getElementById("main-page"));

this.shelter.startup();
},

 

and from there on, all I had to do is tto insert in the appropriate places - his.shelter.show("my text"); and this.shelter.hide();

 

I also managed to change the color of both the txt and the animation vertical bars, by changing in file

jimu.js/css/jimu.css :

1) in .jimu-loading-shelter .loading-container {

color: /*#000000*/ azure; /*mlev LoadingShelter color of text*/

2) in @keyframes shelter-loading {

in 0%,80%,100% {

box-shadow: 0 0 /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

in 40% {

box-shadow: 0 -0.5rem /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

3) in

.jimu-loading-shelter .loading-container .img-div:before,
.jimu-loading-shelter .loading-container .img-div:after,
.jimu-loading-shelter .loading-container .img-div {

 

background: /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

View solution in original post

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

Michael,

   Is this a 3D widget? I see you are using "esri/widgets/Sketch/SketchViewModel" which is a JS 4.x API widget, so that should me that this is a 3D widget in WAB.

0 Kudos
MichaelLev
Occasional Contributor III

Yes, it is 3D widget.

0 Kudos
MichaelLev
Occasional Contributor III

I have built custom widget to enable import of 3d glTF models into a scene. I based it on “url link button” in-panel widget (which does not need and does not have an HTML file) and on example of esri  which shows how to import 3d glTF model into a scene.

Indeed I don’t know if other formats than .glb could be imported?

and I don’t know how to make it that the dimensions from the .glb file will be taken (by my program or by the scene) so that the model will be shown in its real size. Currently the model is inserted with very little dimensions so I “force” some dimension, otherwise it will not be seen at first. If I can get help in better coding of the 3d model import, I’ll appreciate it very much.

Can I please get help also in improving the code that imports the model?

And I’m using Amazon cloud, since it seems that esri do not enable import of 3d model but by url. I hope that they will enable also by zip file.

Thank you very much for all your effective help!

Michael

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

 Sorry I am going to be of no help on the 3D code stuff. I almost never deal with 3D. The URL Link Button did not use a Widget.html because it does not have a widget UI. If you are wanting to show some busy indicator then It sounds like you do have some UI for your widget and you will need to add the loadingDiv to the widgets.html file (like I have in  my Identify and eSearch widgets). Your second question in your original post, you need to call the WidgetManager.getInstance().closeWidget(this); after you have loaded your file (hopefully you have some event that you can use).

0 Kudos
MichaelLev
Occasional Contributor III

Thank you, Robert!

Indeed, afterwards, I saw that I could show the loading icon... only it was not in the middle of map and its colors were not vivid... So I need to put it in midst of the scene and handle its style. I'll try to see examples in the WAB code that uses it, and inform you. 

Important -

I'll appreciate it if you point me to the code of yours Identify and eSearch widgets, so I can learn from them,

and tell me few words on the logic of opening and styling the LoadingShelter loading widget.

I assume that your help will enable me to use it OK, and I'll let you know.

Thank you!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

   In the eSearch widget. there is this  element in the Widget.html:

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

In the Widget.js I have calls like this:

this.shelter.show();
this.shelter.hide();

I have the LoadingShelter in my widgets define array and matching variable list:

'jimu/dijit/LoadingShelter',
...
LoadingShelter,

It's that simple.

0 Kudos
MichaelLev
Occasional Contributor III

Thank you, Robert.

I’m succeeding...

I’ll let you know when I finish.

0 Kudos
MichaelLev
Occasional Contributor III

Dear Robert,

Thaks to your explanations concerning LoadingShelter class, here and in other plaves, I managed to do it, and I want to explain what I did, since my 3d custom widget is in-panel and does not have an explicit html file, so in postCreate I had to place it versus the map (and not versus the widget node), as follows:

 

postCreate: function () {
this.inherited(arguments);
this.shelter = new LoadingShelter({
hidden: true
});

/* next line is important since widget does not have a nice independent html file */
this.shelter.placeAt(/*this.domNode*/ document.getElementById("main-page"));

this.shelter.startup();
},

 

and from there on, all I had to do is tto insert in the appropriate places - his.shelter.show("my text"); and this.shelter.hide();

 

I also managed to change the color of both the txt and the animation vertical bars, by changing in file

jimu.js/css/jimu.css :

1) in .jimu-loading-shelter .loading-container {

color: /*#000000*/ azure; /*mlev LoadingShelter color of text*/

2) in @keyframes shelter-loading {

in 0%,80%,100% {

box-shadow: 0 0 /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

in 40% {

box-shadow: 0 -0.5rem /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

3) in

.jimu-loading-shelter .loading-container .img-div:before,
.jimu-loading-shelter .loading-container .img-div:after,
.jimu-loading-shelter .loading-container .img-div {

 

background: /*#999*/ deepskyblue; /*mlev LoadingShelter color*/

0 Kudos
TemaPrinter
New Contributor

Hello Michael, you can download the transparent loading gif and install it without any problems here http://icons8.com/preloaders

0 Kudos