Scribd
Upload
211 views20 pages

ALV Table With Business Graphics (WebDynpro For ABAP)

This document provides steps to display employee details from an ALV table with business graphics in a WebDynpro for ABAP application. The steps include creating a component controller with nodes and attributes for the employee data, embedding ALV and empty views, binding the employee data to the ALV table, and configuring the ALV settings to display the table and business graphics. Entering an employee number triggers a method to retrieve the data and display it in the ALV table.

Uploaded by

Ercan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
211 views20 pages

ALV Table With Business Graphics (WebDynpro For ABAP)

This document provides steps to display employee details from an ALV table with business graphics in a WebDynpro for ABAP application. The steps include creating a component controller with nodes and attributes for the employee data, embedding ALV and empty views, binding the employee data to the ALV table, and configuring the ALV settings to display the table and business graphics. Entering an employee number triggers a method to retrieve the data and display it in the ALV table.

Uploaded by

Ercan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 20

ALV Table with Business Graphics (WebDynpro for ABAP)

By Swarna Ramya R, Wipro 

In one of my Scenarios, I have to display the Employee details in a table with the Business Graphics.
The Employee details contain the organization unit he is working, Percentage of Assignment, start
date and end date. We can achieve this using the ALV. 

Procedure:

1. Create one Webdynpro Component with name ZWA_ALV_BUSINESS_GRAPH.

2. Press Enter. 

3. In the Component Controller, Go to the Context Tab, Right Click the Context and Select Create à
Node.
 

4. Give the Node Name as EMPLOYEE with Cardinality 0..n and Press Enter.

5. Create four Attributes inside that Node by Right Clicking the Employee and Select Create à
Attribute. 

6. The Attributes are of the Following Type.

ZZORGEH - ORGEH

ZZ_PER_ASSG - ZZASSG

BEGDA - SYDATUM
ENDDA - SYDATUM 

7. Go to the View Context , Drag and Drop the Node EMPLOYEE to the View Context.

8. Then Right Click the Context and Select Create à Attribute. 


9. Give Attribute Name as EMP_NO with Type CHAR8 and Press Enter.  

10. In the Layout Tab of the View, Right click the ROOTUIELEMENTCONTAINER and give Insert
Element. It will open a Pop-Up for Creating an Element. 

11. Enter Label in the Name Field and Select Label in the Type Field and Press Enter.

12. Create another UI Element with INPUT in the Name Field and Select InputField in the Type Field
and Press Enter. 
 

13. In the Label Properties, Select INPUT from the Dropdown for the labelfor Field and Enter ‘Enter
The Employee Number’ in the Text Field. 

14. Create Context Binding For the INPUT by Clicking the Button in the Right Side of the value in the
Properties. It will open a Popup with the Context Element. In that Select the Attribute EMP_NO AND Press
Enter. 
15. Create another Element by Right clicking the ROOTUIELEMENTCONTAINER and give Insert
Element. It will open a Pop-Up for Creating an Element. 

16. Enter BUTTON in the Name Field and Select Button in the Type Field and Press Enter. 

17. Then create one Action for onAction Event of the BUTTON by Clicking the Create Action Button.
Then Give the Action Name as GET_EMPLOYEE_DETAILS and press Enter.  
18. Create another UI Element with Name VIEW and Select ViewContainerUIElement from the
Dropdown in the Type Field. 

19. Go to the Outbound Plugs Tab in the View, and Enter TO_ALV_TABLE in the Plug Name.

20. Go to the Component ZWA_ALV_BUSINESS_GRAPH and Double Click it. In the ‘Used
Component’ Tab, declare the ALV Component as shown below and Press Enter.
 

21. Now go to the View, in the Properties Tab click the Create Controller Usage Button as shown
below. 

22. It will open a screen with Component Use Entries. There select the Component Use ALV with
Interface Controller as shown below. Press Enter.
23. It will display as follows in the View Properties.
24. Then go to the Window ZWA_ALV_BUSINESS_GRA. Then Right Click the VIEW and Select
Embed View. 

25. It will open a Pop-up for Embed View.

26. Click F4 by placing the Cursor in the ‘View to Be Embedded’ Field.


 

27. It will open a Screen for Selecting a View. Select EMPTYVIEW and Press Enter. 

28. The Values will be placed in the Embed a View. Then Press Enter. 
 

29. Again Right Click the VIEW and Select Embed View. 

30. It will open a Pop-up for Embed View. 

31. Click F4 by placing the Cursor in the ‘View to Be Embedded’ Field. 

32. Select Component Use ALV with View/Interface View TABLE and Press Enter. 
33. The Values will be placed in the Embed a View. Then Press Enter. (Note: The Empty View is
placed before inside the View is to Hide the ALV Table at the Beginning). 

34. Right Click the Outbound Plug TO_ALV_TABLE and Select Create Navigation Link. 
35. It will open a Pop-up For Choosing Destination for Navigation. Click F4 in the Dest.View Field. 

36. It will show the Destination Views. There select the Table in the View Column and Press Enter. 
37. It will display the Entries as shown below. Then Press Enter. 
38. Now go to ‘Component usages’ in the left side tree and expand ALV and double click on the
INTERFACECONTROLLER_USAGE. Then Click the Controller Usage Button in the Right Side
Window. 

39. It will open a Screen for Selecting Component Use. There, select the
COMPONENTCONTROLLER in the View/Controller. Then Press Enter.
40. Then Drag and Drop the Node EMPLOYEE to the Node DATA in the Context
INTERFACECONTROLLER. 

41. Go to the View and Click the Tab Methods. 


42. In the ONACTIONGET_EMPLOYEE_DETAILS Method, Write the Following Coding.
ONACTIONGET_EMPLOYEE_DETAILS:
method ONACTIONGET_EMPLOYEE_DETAILS .
wd_this->fire_to_alv_table_plg( ).
DATA lo_nd_employee TYPE REF TO if_wd_context_node.
DATA lo_el_employee TYPE REF TO if_wd_context_element.
DATA lt_employee TYPE wd_this->elements_employee.
DATA ls_employee TYPE wd_this->element_employee.
* navigate from <CONTEXT> to <EMPLOYEE> via lead selection
lo_nd_employee = wd_context->get_child_node( name = wd_this-
>wdctx_employee ).
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->element_context.
DATA lv_emp_no LIKE ls_context-emp_no.

DATA lv_num TYPE I.


* get element via lead selection
lo_el_context = wd_context->get_element( ).
* get single attribute
lo_el_context->get_attribute(
EXPORTING
name = `EMP_NO`
IMPORTING
value = lv_emp_no ).
SELECT ZZORGEH ZZ_PER_ASSG BEGDA ENDDA INTO CORRESPONDING FIELDS OF TABLE
lt_employee FROM PA9027 WHERE PERNR EQ lv_emp_no AND ENDDA EQ
'99991231'.
DESCRIBE TABLE lt_employee LINES lv_num.
lo_nd_employee->BIND_TABLE( lt_employee ).
data lo_cmp_usage type ref to if_wd_component_usage.
lo_cmp_usage = wd_this->wd_cpuse_alv( ).

if lo_cmp_usage->has_active_component( ) is initial.
lo_cmp_usage->create_component( ).
endif.
DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
lo_INTERFACECONTROLLER = wd_this->wd_cpifc_alv( ).
DATA lo_value TYPE ref to cl_salv_wd_config_table.
lo_value = lo_interfacecontroller->get_model( ).
* Set Visible Row Count as 5
lo_value->if_salv_wd_table_settings~set_visible_row_count( lv_num ).
* The Config Table Setting to Display Table & Business Graphics
DATA: l_ref_config_table TYPE REF TO if_salv_wd_table_settings,
l_display_as TYPE salv_wd_constant VALUE '02'.
l_ref_config_table ?= lo_value.
l_ref_config_table->set_display_as( value = l_display_as ).
endmethod.

43. Save the Application and Activate the Component. 

44. Create Webdynpro Application, save it and Test the Application. 

Output: 

1. Enter the Employee Number in the Input Field and Click the Button ‘Get Details’. 

2. The Output will Display as shown below. 

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy