Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Progress indicator and timed trigger

The ProgressIndicator UI element shows how much progress an activity has made in the form of a horizontal bar, along with the value that you have assigned to the percentValue property. You can use the displayValue property to display a text in the ProgressIndicator on the left side of the UI element. This makes it possible to provide descriptions with specific percentage values. You can hide the DisplayValue value using the showValue property. You can display the ProgessIndicator UI element in different colors using the barColor property. You can assign a popup menu to a ProgressIndicator.

You can use the ProgressIndicator UI element  to display, for example, a project status in percent.

Example of the Display

clip_image001

 

 

Step 1 : Create a webdynpro component as shown below.

 

clip_image003

 

 

Step 2 : Go to the view layout and insert a Progress indicator UI element.

 

clip_image005

 

Provide the ID and type for the UI element and press enter.

 

clip_image007

 

 

clip_image009

 

Step 3 : In the context node declare the attribute count, and bind it to the progress indicator UI element.

 

clip_image011

 

Enter the attribute name and type and press Enter.

 

clip_image013

 

 

clip_image015

 

 

Step 4 : Go to the layout and bind the context attribute to the Percent value property of the UI element.

 

clip_image017

 

Step 5 : Go to actions tab and  Create a method and write the following code to increment the count so that the percentage value of the progress indicator will increase.

 

clip_image019

 

Inside the method read the context attribute which we wants to increment using the code wizard.

 

 

clip_image021

 

 

Codes will be generated as below.

 

clip_image023

 

 

Increment the count attribute and set it back to the context.

 

clip_image025

 

  

Setting the context attribute count.

 

clip_image027

  

 

 

Code will be generated as below.

 

clip_image029

 

Remove the declaration part which has been already declared, and set the attribute with an if condition that you have to set only if it is less than or equal to 100 else the progress indicator bar will  return back once it reaches the hundred.

 

clip_image031

 

 

Codings in the method increment.

 

method ONACTIONINCREMENT .

* Read the context attribute Count.



   
DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
   
DATA LS_CONTEXT TYPE
WD_THIS->ELEMENT_CONTEXT.
   
DATA LV_COUNT TYPE
WD_THIS->ELEMENT_CONTEXT-COUNT.

*   get element via lead selection

    LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
*   @TODO handle not set lead selection
   
IF LO_EL_CONTEXT IS INITIAL.
    ENDIF.


*   get single attribute

    LO_EL_CONTEXT->GET_ATTRIBUTE(
     
EXPORTING
        NAME = 
`COUNT`
     
IMPORTING
       
VALUE = LV_COUNT ).

* Increment the count


lv_count = lv_count +
10.

* Set the context attribute count.

if lv_count LE 100.
* set single attribute
  LO_EL_CONTEXT->SET_ATTRIBUTE(
    NAME = 
`COUNT`
   
VALUE
= LV_COUNT ).

endif.

endmethod.

 

 

Step 6 : Now go to the layout and insert a timed trigger UI element, which is used to trigger an event in a regular interval.

 

Timed trigger UI element.

 

The TimedTrigger UI element automatically and periodically triggers an event with a specified delay. The TimedTrigger UI element is not displayed on the user interface. Therefore, it ignores the tooltip and the visibiltyproperty. However, in specific layouts such as the matrix layout it takes up space. To trigger an action, you must bind the onAction property to an action. You use the delay property to specify the delay in seconds.

 

 

clip_image033

 

 

clip_image035

 

In the property of timed trigger, add the onaction event as the method which we created previously and and set the delay property as 1 sec so that the method will get called every one second and our count will get increase and the view gets refreshed so that we can see the progress bar moving.

 

clip_image037

 

 

Save and activate the whole component. Create an application to test the component.

 

Note : timed trigger UI element will not be visible in the screen.

 

Create a webdynpro application.

 

clip_image039

 

 

 

Output :

 

clip_image041

 

 

clip_image043

About Arun

1 Comments:

  1. Hi krishnamurthy,

    I'm having a problem when i'm retrieving the data from db as the process time is to much when its time getting the 5000 session time out error. in this case can i use this UI element

    ReplyDelete

Powered by Blogger.