Using SAP UI5 Progress Indicator in real time applications

[naveen_inuganti2]

In this document I am going to share code that helped me in enabling UI5 progress indicator in my application.

We have "Progress Indicator" control in SAP UI5 library, however, we need still need to place little more Java Script code to make it live Progress Bar. With help of little animation "Progress Indicator" serve much better than "Page loading spinner".

One of the simple way to do it is with help of "setTimeout" function. All we need to do it, declare one "Progress Indicator" with ZERO value and increase that value till 100 or whatever fits for your application. We can set timer to reach max limit. For example, if you set 3 seconds as timer limit then user will see animated/auto filling "Progress Indicator" for 3 secs instead of output/result screen. This is very helpful when your service/source is taking time to get data from server.

Here is the code:

var oProgInd = new sap.ui.commons.ProgressIndicator("ProgInd1");

oProgInd.setWidth("600px");

progressInd(0);

function progressInd(al) {

                                          oProgInd.setPercentValue( parseInt(al) );

                                          al++;

                                          oProgInd.setDisplayValue( "Tracking in progress: "+al+"%" );

                                          var sim = setTimeout( function() { progressInd(al); }, 80 );

                                          if(al == 100){

                                                  clearTimeout(sim);

                                           <Output Call>;

                                        }

                              };

Let's check this code in detail -

First step, declare a variable with type Progress Indicator and assign ID for reference. Here, we are using "setWidth" to assign width to progress indicator on screen. There are other properties to provide colors, default values and others.

var oProgInd = new sap.ui.commons.ProgressIndicator("ProgInd1");

oProgInd.setWidth("600px");

Second step, call function in right place of application logic. For example, when user clicks on button which can take him/her to results screen! "progressInd" is function name and "0" is input for function.

progressInd(0);

Let's see logic inside the function. As we can find in above code, "al" is parameter that passes/gets data to function.

We are sending input value to "Progress Indicator" with help of one of it's property "setPercentValue" and showing that value by concatenating to appropriate text. And then, increasing input value by 1 with help of "++".

 oProgInd.setPercentValue( parseInt(al) );

 oProgInd.setDisplayValue( "Tracking in progress: "+al+"%" );

 al++;

Now, key logic of this function, declared one variable as "setTimeout". As you can see we are calling same function within this variable function but with new input value which has got increased in above step. Also, using 80 milliseconds as timer count. This will become unlimited loop till it reaches "al" = 100 as we are clearing Timeout variable after that, and more importantly we should call result/output content within this function when variable reaches max limit. That way, for end user it will be perfect animation! 

var sim = setTimeout( function() { progressInd(al); }, 80 );

if(al == 100){

     clearTimeout(sim);

     <Output Call>;

                                        }

Thank you!