SAPUI5 Tip: How to make an animation progressing bar.

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