Add loading icon to url button custom widget

[CarolineBettach]

 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?

[RobertScheitlin__GISP]

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;
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CarolineBettach]

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

[RobertScheitlin__GISP]

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?

[CarolineBettach]

this is my  app config.json ,

What do i need to change?

[RobertScheitlin__GISP]

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.

[CarolineBettach]

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

[CarolineBettach]

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?

[RobertScheitlin__GISP]

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;
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CarolineBettach]

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

var layerUrl = "http://tapat4/restservice/api/calc";
var requestHandle = esriRequest({
url: layerUrl,
content: { f: "json" },
handleAs: "json"
});
requestHandle.then(
function (response) {
var responseJSON = JSON.stringify(response, null, 2);

//alert(responseJSON);
this.loadingPanel.hide();
this.isOpening = false;
WidgetManager.getInstance().closeWidget(this);
},
function (error) {
//alert( error.message);
this.loadingPanel.hide();
this.isOpening = false;
WidgetManager.getInstance().closeWidget(this);
});

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