Show loading message while the widget is doing operations

[MargaRaiz]

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

[RobertScheitlin__GISP · Accepted solution]

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>‍‍‍‍

[MargaRaiz]

Hi Robert! I will try and keep you informed.

thanks!

Itziar

[RobertScheitlin__GISP]

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

[MargaRaiz]

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

[JohnLocke1]

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

[RobertScheitlin__GISP]

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();

[JohnLocke1]

Thanks Robert, you're awesome as usual