Skip to Content

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

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Sharma Chetanya

    Very helpful – I have implemented this, and getting a progress indicator on my page – only one issue, it is not showing the progress bar animating. Something to do with the variable “al”?? From where the function will get the value of this variable?

    Could you also let me know the best place to call these start/stop functions in my scenario — I have 3 consecutive read calls before I display the results.

    OnPress : function(){

         xyzModel= new sap.ui.model.odata.ODataModel(url, false, user, pwd);

       

         oController.call1();

         oController.call2();

         oController.call3();

    }

    call1 : function(){

         xyzModel.read(“/aaa”, null, null, false.

              function(oData, response){//fnSuccess},

              function(OError){//fnError},

    }

    call2 : function(){

         xyzModel.read(“/bbb”, null, null, false.

              function(oData, response){//fnSuccess},

              function(OError){//fnError},

    }

    call3 : function(){

         xyzModel.read(“/ccc”, null, null, false.

              function(oData, response){//fnSuccess},

              function(OError){//fnError},

    }

    That’s my calling controller structure.. Quick help will be appreciated !!

    (0) 

Leave a Reply