topic Re: Add loading icon to custom widget (like url) in panel in Web AppBuilder Custom Widgets Questions

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

MichaelLev — Wed, 01 Jul 2020 16:54:58 GMT

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.

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

RobertScheitlin__GISP — Wed, 01 Jul 2020 17:42:34 GMT

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.

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

MichaelLev — Wed, 01 Jul 2020 19:08:37 GMT

Yes, it is 3D widget.

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

MichaelLev — Wed, 01 Jul 2020 19:22:31 GMT

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

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

RobertScheitlin__GISP — Wed, 01 Jul 2020 20:25:12 GMT

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).

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

MichaelLev — Thu, 02 Jul 2020 03:33:26 GMT

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!

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:25:13 GMT

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.

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

MichaelLev — Thu, 02 Jul 2020 15:19:40 GMT

Thank you, Robert.

I’m succeeding...

I’ll let you know when I finish.

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

MichaelLev — Fri, 03 Jul 2020 14:23:32 GMT

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*/

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

TemaPrinter — Tue, 29 Dec 2020 16:57:19 GMT

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