topic Re: Show loading message while the widget is doing operations in Web AppBuilder Custom Widgets Questions

Show loading message while the widget is doing operations

MargaRaiz — Thu, 06 Oct 2016 12:18:58 GMT

Hi!

I need to show a loading icon or something similar while the widget is performing a query or other operation. I have never done this before (no in JS or WAB) and I am quite lost. I would like something simple, just to make understand to the user that he/she needs to wait.

Any idea or tip for having something to start work on please?

Thanks!

Marga

Re: Show loading message while the widget is doing operations

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:18:25 GMT

Marga,

Sure use the WAB dijit designed for that purpose:

Widget.js:

Require

'jimu/dijit/LoadingShelter',‍

methods

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

Widget.html:

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

Re: Show loading message while the widget is doing operations

MargaRaiz — Fri, 07 Oct 2016 12:17:27 GMT

Hi Robert! I will try and keep you informed.

thanks!

Itziar

Re: Show loading message while the widget is doing operations

RobertScheitlin__GISP — Fri, 07 Oct 2016 21:18:06 GMT

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

Re: Show loading message while the widget is doing operations

MargaRaiz — Mon, 10 Oct 2016 06:52:43 GMT

Of course! I was just waiting to check it if it works and it works, thanks!

Re: Show loading message while the widget is doing operations

JohnLocke1 — Tue, 19 Feb 2019 08:59:39 GMT

Hi Marga!

I would like to use this in my widget, but I'm so beginner in this. Can you help me? I understand, what should I do with the html, but it's not clear, where should I write these lines into the widget.js. Can you printscreen it?

Thanks, John

Re: Show loading message while the widget is doing operations

RobertScheitlin__GISP — Tue, 19 Feb 2019 13:39:03 GMT

John,

Just add the

'jimu/dijit/LoadingShelter',

to your widget.js define array.

Then in your code startup or open method call

this.shelter.show();

and when your widget is done tasks that take some time call

this.shelter.hide();

Re: Show loading message while the widget is doing operations

JohnLocke1 — Tue, 19 Feb 2019 14:40:23 GMT

Thanks Robert, you're awesome as usual