Author: David Pietroniro
- SAP Help Documentation
- User Interface Development with Web Dynpro for ABAP
- Web Dynpro for ABAP - Get Started
Sometimes it's necessary to add some UI elements (like checkboxes, images linktoactions and so on) to an ALV table. In this, I will explain in few steps how to use some of these UI elements.
In this will be described the steps to create a simple web dynpro component that determine the list of flight bookings (BAPI SAPBC_BAPI_SBOOK) and then show the list in an ALV table with images regarding the booking status (cancelled or not), an checkbox related to the reservation and a linktoaction that when clicked will show the XML representation of the selected record.
The result of this will be the following:
And when the user clicks in the booking number will be showed a new browser window with the XML canonical representation of the record:
Creating the web dynpro component
Go to the Object Navigator (transaction SE80) and create a new web dynpro component with name ZWDC_ALV_ELEMENTS, window name W_MAIN and view name V_MAIN.
Now double click the created web dynpro component and define a new used component like follows:
Creating the node
After create the new web dynpro component and define the CL_SALV_TABLE as used component, go to the COMPONENTCONTROLLER and create a new context node (above) and click on button Add Attribute from Structure.
Now select all fields from the structure BAPISBODAT and click on Cotinue (Enter), the node will have the structure above:
Changing the node structure
Select the node T_BOOK and go to the properties tab and delete the dictionary structure BAPISBODAT.
Now select the attribute CANCELLED and change it's type to STRING (I did it because this attribute will be used to maintain the status icon). Now right click it and select the option Move. In the window that appears select the node T_NODE, this will put the CANCELLED attribute like the first attribute of the node.
The new node structure now is:
Coding the SUPPLY method
Go to the Methods tab and double click the method SUPPLY. Put the code above:
This will get all booking records, change the CANCELLED field to an icon value and then bind it to the context node T_BOOK.
Defining the used components
Go to the Properties tab and add the component SALV_WD_TABLE and its INTERFACECONTROLLER:
Now in the Layout tab insert a View Container UI Element with id VC_ALV. This will be the ALV table container.
In the Context tab define a Mapping to the node T_BOOK from the component controller (just drag and drop the node from one area to other).
Now code the methods like follows:
This method is responsible for the changes in the cell editor, as you will see it creates an LinkToAction, a CheckBox and a Image cell editor.
This method is responsible by change the String variable that contains the record XML representation to an Xstring variable that will be displayed in a browser window.
It contains two parameters:
- I_XML of importing type and with string as associated type;
- R_XML of returning type and with xstring as associated type.
This method is an event handler for the event ON_CLICK from the CMP_ALV. This method type should be 1 Event Handler.
Now in the window W_MAIN, embed the view Table from component use CMP_ALV to the view VI_MAIN (open the tree structure right click on VI_MAIN and Embed View).
In the component usages, select the CMP_ALV and in the INTERFACECONTROLLER define an external mapping with the node T_BOOK of COMPONENTCONTROLLER (click on button Controller Usage, select the component controller, right click on the DATA node, select the option Define external mapping and select the node T_BOOK).
Activating and creating a Web Dynpro Application
To finish, activate all objects and create a web dynpro application (right click on the web dynpro component).
Just save and test it, the result must be like the first figure of this tutorial.