Skip to Content
Author's profile photo Amy King

Component Usages in Web Dynpro ABAP Part I: ABAP List Viewer (ALV)


Component usages allow you to incorporate reusable user interface components into a Web Dynrpo ABAP and can help you to build feature-rich applications. In addition to the ability to build your own custom components for component usage, SAP provides several very useful components. In this article, we demonstrate how to incorporate ABAP List Viewer (ALV) into a Web Dynpro ABAP.


You need to display an ALV of flight data and provide the user with dropdown values by which to filter on airline carrier and plane type.


1.0 Create a Web Dynpro Component

Create a web dynpro component, ZDEMO_ALV with a view, MAIN and window, WINDOW.


2.0 Create the Component Usage

On the Used Components tab of component ZDEMO_ALV, create a component usage for SALV_WD_TABLE.


Create the same component usage on view MAIN for both the SALV_WD_TABLE component and its interface controller.


3.0 Map the ALV Context Nodes

SALV_WD_TABLE includes an interface controller with five context nodes. In this example, we will use only the DATA and FILTER_VALUES nodes. Node DATA will contain the data to be displayed in the ALV and node FILTER_VALUES will contain dropdown values by which the user may filter individual ALV columns.

3.1 Create and Supply Context Node FLIGHT_DATA

In the component controller, create a node, FLIGHT_DATA, with cardinality 0..n and dictionary structure SFLIGHT. Use the wizard to add attributes to the node from the dictionary structure.


If the ALV’s DATA node is defined as having a dictionary structure, it will automatically display all fields of the structure even if only a subset of fields is selected for the context node. To make the ALV display only the context node fields, remove the dictionary structure from the context node definition.


Also create supply function, SUPPLY_FLIGHT_DATA, to populate node FLIGHT_DATA.

METHOD supply_flight_data.

   DATA lt_flight_data TYPE wd_this->elements_flight_data.

          FROM sflight
          ORDER BY carrid connid.

     new_items            = lt_flight_data
     set_initial_elements = abap_true ).


3.2 Map Component Controller Node FLIGHT_DATA to ALV Interface Controller Node DATA

Open the component usage’s interface controller by double-clicking it in the object navigator.


Click the button, Controller Usage, and select the ZDEMO_ALV component controller to create a usage of the ALV’s interface controller context. Next, map component controller node FLIGHT_DATA to ALV interface controller node DATA by drag-and-drop from the component controller context to its corresponding node in the interface controller context.


3.3 Map ALV Interface Controller Node FILTER_VALUES to the View Controller Context

Open the context of view MAIN and map ALV interface controller node FILTER_VALUES to the view’s context by drag-and-drop from the interface controller context to the view context.


In hook method WDDOINIT of view MAIN, populate context node FILTER_VALUES with dropdown values for ALV columns carrier and plane type.

METHOD wddoinit.

   DATA lt_filter_values TYPE wd_this->elements_filter_values.
   DATA ls_filter_values TYPE wd_this->element_filter_values.
   DATA lo_nd_filter_values TYPE REF TO if_wd_context_node.

 * Filter values for carrier
   ls_filter_values-fieldname = 'CARRID'.

   SELECT carrid   AS key
          carrname AS value
          FROM scarr
          INTO TABLE ls_filter_values-t_dropdown_values
          ORDER BY carrname.

   APPEND ls_filter_values TO lt_filter_values.

 * Filter values for plane type
   ls_filter_values-fieldname = 'PLANETYPE'.

   SELECT planetype AS key
          planetype AS value
          FROM saplane
          INTO TABLE ls_filter_values-t_dropdown_values
          ORDER BY planetype.

   APPEND ls_filter_values TO lt_filter_values.

   lo_nd_filter_values = wd_context->get_child_node(
     name = wd_this->wdctx_filter_values ).

     new_items            = lt_filter_values
     set_initial_elements = abap_true


4.0 Embed the ALV TABLE View

Open the layout of view MAIN and create a ViewContainerUIElement to receive the ALV table.


Finally, open window WINDOW and embed the ALV view TABLE into view MAIN’s ViewContainerUIElement.



Save, activate and run the web dynpro application. The listing of flight data displays as a read-only ALV table, and the columns for carrier and plane type offer the user dropdown values for filtering the individual columns.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Amy, Thank you very much,

      It looks very easy and it very helpful for me becasue I am starting with Web DynPro.

      Thank  you!!

      Author's profile photo Amit Pardikar
      Amit Pardikar

      Hello Amy,

      Thank you so much for your post.

      I am having trouble while binding filter values in OnAction event.Filter drop down is set only if filter values are bind in wddoinit event.

      Is it possible to bind filter values in OnAction event ?

      Thank you.



      Author's profile photo Amy King
      Amy King
      Blog Post Author

      Hi Amit,

      The mapped filter node needs to be already available to the ALV when the ALV is first generated, so it's not possible to update the filter node in a later action.



      Author's profile photo kiruthika Periyasamy
      kiruthika Periyasamy

      Hi Amy,

        I have to change the list of  values of second column filter in alv  based on the value selected in  first  column alv filter.

      Can u provide me under which point we can read the selected value from dropdown list of alv filter and set the values of another column alv filter corresponding to selected values ?

      Author's profile photo Robin Kiwitt
      Robin Kiwitt


      I used your procedure to get an ALV displayed and added

      this coding:

      to make my ALS editable. However, I would like to get rid of the "append row",  "delete.." etc.

      I found several answers to my Problem if I use a function call to get the ALV grid, however, how do I

      accomplish my Goal in this certain Situation?

      Appreciating any respone.


      Author's profile photo Former Member
      Former Member

      Hi Robin,

      thanks for using my Stacknoise blog 😉

      You can deactivate standard functions by using the interface methods IF_SALV_WD_STD_FUNCTIONS wich is implemented by CL_SALV_WD_CONFIG_TABLE.

      According to my coding this would for appending this coding:

      obj_table->if_salv_wd_std_functions~IS_EDIT_APPEND_ROWS_ALLOWED( abap_false ).


      obj_table->if_salv_wd_std_functions~ IS_EDIT_DELETE_ROW_ALLOWED( abap_false ).

      I hope this is helpful for you.




      Author's profile photo Robin Kiwitt
      Robin Kiwitt


      Thank you Anton! 🙂