ALV Tables are most preferred way to display when you have large amount of data to be displayed in tabular format due its flexibility and numerous features. However developing applications with ALV Tables in Webdynpro are perceived more difficult than the startdard Table element of Web Dynpro ABAP. Let’s see how to create a simple ALV Table with minimum options and code to understand the basics of ALV.
Now we are going to create an Web Dynpro Application, which will have only one big ALV Table with Customer master data in it.
Create a new Web Dynpro Component and add ALV Component (
SALV_WD_TABLE) as one
of the component that is going to be used in our custom component that we have created.
ALV Table is not a an element to just drag and drop and start writing the code. It is a Web Dynpro Component itself and we can only make use of it by component usage techniques.
Now go the the
MAIN view’s properties tab. You need to add the ALV Component here
under the Used Controllers/Components section. This generates the objects and
methods necessary to interact with the ALV Component in the
Switch to the Layout tab of
MAIN view and add a ViewContainerUIElement.
This View Container will help us display the ALV Table from the ALV Table
Now to show the ALV Table in the View Container, you have to go the MAIN Window
and embed the
TABLE view of
SALV_WD_TABLE component into the View Container.
TABLE view using the search help. Once selected it will look as
After embedding, the window tree will look as shown below
That’s it. We have done the basic wiring between ALV Component and our custom component. Now the remaining part is only fetching data & displaying it on the table.
So we have to decide what data we are going to display on the table. Let’s display the Customer Master data from KNA1 in the ALV table. First we need to create the context node for holding the data that has to be displayed. Create the context with whatever fields you like to have, from the KNA1 table as shown below.
WDDOINIT method of
MAIN view we are going to initialize the ALV Table
method WDDOINIT . data: "Interface Controller for ALV Table lo_alv_if type ref to iwci_salv_wd_table, "Context Node for KNA1 lo_data_node type ref to if_wd_context_node, "Component Usage for ALV Table lo_comp_usg type ref to if_wd_component_usage. lo_data_node = wd_context->get_child_node( 'KNA1' ). lo_comp_usg = wd_this->wd_cpuse_alv( ). IF lo_comp_usg->has_active_component( ) EQ abap_false. "Create the ALV Component Instance if its not "already created lo_comp_usg->create_component( ). ENDIF. "Get the Interface Controller for ALV Table lo_alv_if = wd_this->wd_cpifc_alv( ). "Set the Node which should be displayed in the Table lo_alv_if->set_data( lo_data_node ). "Loads the data to the context node wd_this->load_data( ). endmethod.
When the application is launched for the first time, we have to create an
instance of the ALV Component and then get the reference to the Interface
Controller of the ALV Component. It is only through the Interface Controller
we will be able to communicate to the external component. Here we are setting
the Context Node which contains the data to the ALV Component through the
set_data method of ALV Component’s Interface Controller.
Finally we are calling the
load_data method in the
WDDOINIT which takes care
of loading the data to the Context Node.
method load_data . data: lt_data type wd_this->elements_kna1, lo_node type ref to if_wd_context_node. lo_node = wd_context->get_child_node( 'KNA1' ). "Read first 1000 records from KNA1 select * from kna1 into corresponding fields of table lt_data up to 1000 rows. lo_node->bind_table( exporting new_items = lt_data ). endmethod.
We have successfully made a Web Dynpro Application with ALV Component. The final application looks as shown below.