topic Re: Add loading icon to url button custom widget in Web AppBuilder Custom Widgets Questions

Add loading icon to url button custom widget

CarolineBettach — Sun, 03 Mar 2019 21:27:45 GMT

Do you know how can i change your url button code custom widget and add a loading icon that will be s display when clicking on the button on will be hidden when the service will return a response?

Re: Add loading icon to url button custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:07:43 GMT

Caroline,

Here is how to do it if you have the widget in one of the onscreen widget icon placeholders:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2016 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'jimu/WidgetManager',
    'dojo/query',
    'dojo/_base/html',
    'dijit/registry'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    WidgetManager,
    query,
    html,
    registry) {
    var clazz = declare([BaseWidget], {

      name: 'UrlButton',
      baseClass: 'widget-urlbutton',
      isOpening: false,
      pWidget: null,

      onOpen: function(){
        if(!this.isOpening){
          this.isOpening = true;
          var urlBtnArr = query("div[data-widget-name='UrlButton']");
          urlBtnArr.some(lang.hitch(this, function(node){
            var parentWid = html.getAttr(node, 'widgetId');
            if(html.hasClass(node, "jimu-widget-onscreen-icon")){
              this.pWidget = registry.byId(parentWid);
              if(this.pWidget.widgetConfig.id === this.id){
                setTimeout(lang.hitch(this, function(){
                  this.pWidget._showLoading();
                }), 200);
                return true;
              }
            }
          }));
          //now run your web service stuff and wehn that finishes 
          //then do the next three lines
          this.isOpening = false;
          this.pWidget._hideLoading();
          WidgetManager.getInstance().closeWidget(this);
        }
      }
    });
    return clazz;
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add loading icon to url button custom widget

CarolineBettach — Mon, 04 Mar 2019 06:16:56 GMT

Thank you for your answer.

I have added your code but it does not work cause i get html.hasClass(node, "jimu-widget-onscreen-icon") is false

I think i need to add something but i don't know how .this framework is new for me,please let me know what i need to add and how.

Thank you so much

Re: Add loading icon to url button custom widget

RobertScheitlin__GISP — Mon, 04 Mar 2019 12:49:10 GMT

Caroline,

If that is the case then you do not have the widget in a on screen widget placeholder like I mentioned the code was written for. What theme are you using and where in that theme do you have your widget placed?

Re: Add loading icon to url button custom widget

CarolineBettach — Mon, 04 Mar 2019 13:06:06 GMT

this is my app config.json ,

What do i need to change?

Re: Add loading icon to url button custom widget

RobertScheitlin__GISP — Mon, 04 Mar 2019 13:26:32 GMT

Caroline,

You have the widget inside the HeaderController widget. The code I provided is not made for the widget to be placed there. If you move it to one of the on screen placeholders then it will work as intended.

Re: Add loading icon to url button custom widget

CarolineBettach — Mon, 04 Mar 2019 13:43:42 GMT

Thank you it works now.

But it is not what i wanted.

What i want is when the user click on the url button it will display a loading icon overlay in the middle of the page and that the user won't be able to touch any button in the app until i hide the loading icon panel.

Sorry for the misunderstanding.

Could you please tell me what changes do i need to make in the urlbutton code?

Thank you

Re: Add loading icon to url button custom widget

CarolineBettach — Mon, 04 Mar 2019 14:11:59 GMT

I would like to add this Show loading icon | ArcGIS API for JavaScript 3.27 when i click on a url button but how to change my url button code?

Re: Add loading icon to url button custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:07:46 GMT

Here is that. Be sure to add your busy image to the widgets images folder and update the url in the code.

///////////////////////////////////////////////////////////////////////////
// Copyright © 2016 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'jimu/WidgetManager',
    'jimu/utils',
    'esri/dijit/util/busyIndicator'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    WidgetManager,
    utils,
    busyIndicator) {
    var clazz = declare([BaseWidget], {

      name: 'UrlButton',
      baseClass: 'widget-urlbutton',
      isOpening: false,
      pWidget: null,

      onOpen: function(){

        if(!this.isOpening){
          this.isOpening = true;
          var busyURL = utils.processUrlInWidgetConfig("images/predefined_loading_4.gif", this.folderUrl);
          this.handle = busyIndicator.create({
            target: "map",
            imageUrl: busyURL,
            backgroundOpacity: 0.5
          });
          this.handle.show();
          //Then when your service is done
          this.handle.hide();
          WidgetManager.getInstance().closeWidget(this);
        }
      }
    });
    return clazz;
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add loading icon to url button custom widget

CarolineBettach — Tue, 05 Mar 2019 12:32:37 GMT

Thank you so much for your help!!

Now it's ok i see the loading icon but after i get the response from the rest service i try to hide the loading icon with:

this.loadingPanel.hide(); but it does not hide because when i debug i get this.loadingPanel is undefined.

Please help me to resolve this problem

thank you

///////////////////////////////////////////////////////////////////////////
// Copyright © 2016 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
'dojo/_base/declare',
'dojo/_base/lang',
'jimu/BaseWidget',
'jimu/WidgetManager',
'esri/request',
'jimu/utils',
'esri/dijit/util/busyIndicator'
],
function (
declare,
lang,
BaseWidget,
WidgetManager,
esriRequest,
utils,
busyIndicator
) {
var clazz = declare([BaseWidget], {

name: 'UrlButton',
baseClass: 'widget-urlbutton',
isOpening: false,
loadingPanel: null,

onOpen: function () {
if (!this.isOpening) {
this.isOpening = true;
var busyURL = utils.processUrlInWidgetConfig("images/Spinner.gif", this.folderUrl);
this.loadingPanel = busyIndicator.create({
target: "map",
imageUrl: busyURL,
backgroundOpacity: 0.5
});
this.loadingPanel.show();

} //if this opening open
} //on open
}); //clazz declare
return clazz;
}); //function

Re: Add loading icon to url button custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:07:48 GMT

Caroline,

You just have to hitch your result and error function to the current scope of this.

requestHandle.then(
  lang.hitch(this, function (response) {
    var responseJSON = JSON.stringify(response, null, 2);
    //alert(responseJSON);
    this.loadingPanel.hide();
    this.isOpening = false;
    WidgetManager.getInstance().closeWidget(this);
  }),
  lang.hitch(this, function (error) {
    //alert( error.message);
    this.loadingPanel.hide();
    this.isOpening = false; 
    WidgetManager.getInstance().closeWidget(this);
  })
);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍