Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

Applies to:
This article applies to SAP ECC6.0 EhP5, SAP Netweaver 7.0 Enhancement Package 2. For more information, visit the Web Dynpro ABAP homepage

Summary
In this article demonstrate the Following Scenario. Input will be a date field and material number. Depending on the selection criteria, the output table will be filled. Output shows, to which customer, what quantity of material has to be sold. According to the quantity to be sold, the progress indicator is displayed against each Sold-To customer. Author: Renuka Srinivasan

Company: Applexus Technologies (P) Ltd Created on: 17 May 2011

Author Bio
Renuka Srinivasan is working as SAP Technology Consultant at Applexus Technologies (P) Ltd.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

Table of Contents
Progress Indicator ............................................................................................................................................... 3 Steps: ....................................................................................................................................................... 3 Related Content ................................................................................................................................................ 12 Disclaimer and Liability Notice .......................................................................................................................... 13

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

Progress Indicator
The Progress Indicator 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 percent Value property. You can use the display Value property to display a text in the Progress Indicator on the left side of the UI element. This makes it possible to provide descriptions with specific percentage values. We can hide the Display Value using the show Value property. We can display the Progress Indicator UI element in different colors using the bar Color property. We can assign a popup menu to a Progress Indicator. You can use the Progress Indicator UI element to display, for example, a project status in percent.

Steps:
1. Create Web Dynpro Component

2. Create View

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

3. Go to view and design the layout and add a label and input field for Date.

4. In the same way, create one label and input field for material.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

5. Create a button to fetch data to display. 6. On the property text, fill value as Get Data. And create an action for this button by clicking the button.

7. Go to context tab and create the node and attribute for input/output. Fill node name and click enter.

8. Similarly create one more node for material.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

9. Right Click on date_node and create an attribute

10. Similarly create an attribute for material as follows

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

11. Create a new node by right clicking context with cardinality 01. This is to build the output structure. Node name is Order_Data and add following attributes.

Similarly do the following attributes Attribute Name KUNNR MATNR ARKTX KWMENG MEINS PROGRESS 12. After this context for view1 should look like: Type KUINNR MATNR ARKTX KWMENG MEINS NUMC3

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

13. Now we have to bind these attributes. 14. Go to layout and click on first input field. Click on the binding tab for value property and assign the date field to it.

15. Similarly click second input field and click on select material attribute for it.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

16. Create table using Web Dynpro Code Wizard and bind the attributes. The last filed is set to Progress indicator type. By default it is set to Text View. So have to manually change it to Progress Indicator and its property to percent value.

17. Under ROOTUIELEMENTCONTAINER, click on table_progress (which is the attribute under the table). Set the width value for this progress indicator as 100px.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

18. We have to write the code to fetch the data from database in this action method. For this, double click the action that you created. Then do the required thing and see the following for reference.

19. Place the view inside the window. Double click the window and drag the view into it. 20. Create a Webdynpro application for this component.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

21. Activate the whole component.

22. Test the Application

23. Click Get Data

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

Related Content
ProgressIndicator https://cw.sdn.sap.com/cw/docs/DOC-30993 ProgressIndicator Properties - Properties in the View Designer

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Usage of Progress Indicator UI Element in Web Dynpro ABAP Table Control

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13