Skip to Content

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.

alv_comp.JPG

2.0 Create the Component Usage

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

alv_comp_usage.JPG

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

alv_usage_view.JPG

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.

alv_context_attributes.JPG

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.

alv_node_data.JPG

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.

alv_obj_nav.JPG

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.

alv_map_data.JPG

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.

alv_map_filter.JPG

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.

alv_view_layout.JPG

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

alv_window.JPG

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.

alv_result_carrier.JPG

alv_result_after.JPG

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

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

    Regards,

    Amit.

    (0) 
    1. Amy King 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.

      Cheers,

      Amy

      (0) 
  2. 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 ?

    (0) 
    1. Anton Hartl

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

      or

      obj_table->if_salv_wd_std_functions~ IS_EDIT_DELETE_ROW_ALLOWED( abap_false ).

      I hope this is helpful for you.

       

      Best,

      Anton

      (1) 

Leave a Reply