How to Make a Simple ALV Table in Web Dynpro ABAP

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 MAIN view.

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 Component.

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.

Select the TABLE view using the search help. Once selected it will look as shown below.

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.

On the WDDOINIT method of MAIN view we are going to initialize the ALV Table Component.

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.