SAPUI5 Tip: How to make an animation progressing bar.

[Former Member]

You can make an animation using progressing indicator in sapui5 app while doing some service calling.

Here is how you can make it. Hope this helps someone.

Br,

Dong Zhu

------------------ codes:

In "Controller" .js code:

   onInit: function() {

    tid=null;

   },

   some_evt handler func(){

       call the Start/Stop indicator funcs defined in Utility codes

   }

In "View" code:

           var oProgInd = new sap.ui.commons.ProgressIndicator("ProgInd", {

            width: "580px",

            showValue:false,

            visible: true,

            barColor: sap.ui.core.BarColor.POSITIVE

        });

In "Utility" codes:

function stopProgInd(){
if(tid != null){
     var oProgInd = sap.ui.getCore().byId("ProgInd");
     oProgInd.setVisible(false);
     clearTimeout(tid);
     tid=null;
}
}

function startProgInd(){
if(tid == null){
  var oProgInd = sap.ui.getCore().byId("ProgInd");
  oProgInd.setVisible(true);
 
  progressInd(0);
  function progressInd(al) {
   oProgInd.setPercentValue( parseInt(al) );
   al= (al==100)? 0: al+10;
   oProgInd.setDisplayValue( "Loading data, please wait... "); 
   tid = setTimeout( function() { progressInd(al); }, 80 );
  };
}
}