Overview

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.

Scenario

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.

Procedure

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.

   SELECT *
          FROM sflight
          INTO CORRESPONDING FIELDS OF TABLE lt_flight_data
          ORDER BY carrid connid.

   node->bind_table(
     new_items            = lt_flight_data
     set_initial_elements = abap_true ).

 ENDMETHOD.

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

   lo_nd_filter_values->bind_table(
     new_items            = lt_filter_values
     set_initial_elements = abap_true
   ).

 ENDMETHOD.

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.

Result

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.