Skip to end of metadata
Go to start of metadata

Author: David Pietroniro
Submitted: 01/07/2008
Related Links:


Sometimes it's necessary to add some UI elements (like checkboxes, images linktoactions and so on) to an ALV table. In this, I will explain in few steps how to use some of these UI elements.

The application

In this will be described the steps to create a simple web dynpro component that determine the list of flight bookings (BAPI SAPBC_BAPI_SBOOK) and then show the list in an ALV table with images regarding the booking status (cancelled or not), an checkbox related to the reservation and a linktoaction that when clicked will show the XML representation of the selected record.

The result of this will be the following:

And when the user clicks in the booking number will be showed a new browser window with the XML canonical representation of the record:

Creating the web dynpro component

Go to the Object Navigator (transaction SE80) and create a new web dynpro component with name ZWDC_ALV_ELEMENTS, window name W_MAIN and view name V_MAIN.

Now double click the created web dynpro component and define a new used component like follows:

Component controller

Creating the node

After create the new web dynpro component and define the CL_SALV_TABLE as used component, go to the COMPONENTCONTROLLER and create a new context node (above) and click on button Add Attribute from Structure.

Now select all fields from the structure BAPISBODAT and click on Cotinue (Enter), the node will have the structure above:

Changing the node structure

Select the node T_BOOK and go to the properties tab and delete the dictionary structure BAPISBODAT.

Now select the attribute CANCELLED and change it's type to STRING (I did it because this attribute will be used to maintain the status icon). Now right click it and select the option Move. In the window that appears select the node T_NODE, this will put the CANCELLED attribute like the first attribute of the node.

The new node structure now is:

Coding the SUPPLY method

Go to the Methods tab and double click the method SUPPLY. Put the code above:

METHOD supply.
    lt_book TYPE STANDARD TABLE OF bapisbodat
    lt_book_aux TYPE wd_this->elements_t_book,
    ls_book_aux LIKE LINE OF lt_book_aux,
    lr_t_book TYPE REF TO if_wd_context_node.
    <fs_book> LIKE LINE OF lt_book.

      booking_list = lt_book.

* Define the cancelled icon
  LOOP AT lt_book ASSIGNING <fs_book>.
    MOVE-CORRESPONDING <fs_book> TO ls_book_aux.
    IF <fs_book>-cancelled IS INITIAL.
      ls_book_aux-cancelled = `~Icon/Failure`.
      ls_book_aux-cancelled = `~Icon/CheckedOk`.
    APPEND ls_book_aux TO lt_book_aux.

* Bind the table
  lr_t_book = wd_context->get_child_node( name = wd_this->wdctx_t_book ).
  IF lr_t_book IS NOT INITIAL.
    lr_t_book->bind_table( lt_book_aux ).

This will get all booking records, change the CANCELLED field to an icon value and then bind it to the context node T_BOOK.


Defining the used components

Go to the Properties tab and add the component SALV_WD_TABLE and its INTERFACECONTROLLER:

View layout

Now in the Layout tab insert a View Container UI Element with id VC_ALV. This will be the ALV table container.


In the Context tab define a Mapping to the node T_BOOK from the component controller (just drag and drop the node from one area to other).



Now code the methods like follows:


This method is responsible for the changes in the cell editor, as you will see it creates an LinkToAction, a CheckBox and a Image cell editor.

METHOD build_alv.
    lr_alv_usage       TYPE REF TO if_wd_component_usage,
    lr_if_controller   TYPE REF TO iwci_salv_wd_table,
    lr_config          TYPE REF TO cl_salv_wd_config_table,
    lr_column_settings TYPE REF TO if_salv_wd_column_settings,
    lt_columns         TYPE        salv_wd_t_column_ref,
    lr_link            TYPE REF TO cl_salv_wd_uie_link_to_action,
    lr_checkbox        TYPE REF TO cl_salv_wd_uie_checkbox,
    lr_image           type ref to cl_salv_wd_uie_image.
    <fs_column> LIKE LINE OF lt_columns.

* Instantiate the ALV Component
  lr_alv_usage = wd_this->wd_cpuse_cmp_alv( ).
  IF lr_alv_usage->has_active_component( ) IS INITIAL.
    lr_alv_usage->create_component( ).

* Get reference to model
  lr_if_controller = wd_this->wd_cpifc_cmp_alv( ).
  lr_config        = lr_if_controller->get_model( ).

* Set the UI elements.
  lr_column_settings ?= lr_config.
  lt_columns = lr_column_settings->get_columns( ).

  LOOP AT lt_columns ASSIGNING <fs_column>.
    CASE <fs_column>-id.
        CREATE OBJECT lr_link.
        lr_link->set_text_fieldname( <fs_column>-id ).
        <fs_column>-r_column->set_cell_editor( lr_link ).
        CREATE OBJECT lr_checkbox
            checked_fieldname = <fs_column>-id.
        <fs_column>-r_column->set_cell_editor( lr_checkbox ).
        FREE lr_checkbox.
        CREATE OBJECT lr_image.
        lr_image->set_source_fieldname( <fs_column>-id ).
        <fs_column>-r_column->set_cell_editor( lr_image ).
        FREE lr_image.


This method is responsible by change the String variable that contains the record XML representation to an Xstring variable that  will be displayed in a browser window.

It contains two parameters:

  • I_XML of importing type and with string as associated type;
  • R_XML of returning type and with xstring as associated type.
METHOD convert_file .
    lc_utf TYPE abap_encoding VALUE 'UTF-8'.
    lv_string TYPE        string,
    lr_conv   TYPE REF TO cl_abap_conv_out_ce.

  lr_conv = cl_abap_conv_out_ce=>create( encoding = lc_utf ).
  lr_conv->convert( EXPORTING data = i_xml IMPORTING buffer = r_xml ).


This method is an event handler for the event ON_CLICK from the CMP_ALV. This method type should be 1 Event Handler.

METHOD details.
    lco_filename  TYPE string VALUE `TEST.XML`,
    lco_mime_type TYPE string VALUE `text/xml`.
    lr_bookingid TYPE REF TO bapisbodat-bookingid,
    lr_t_book    TYPE REF TO if_wd_context_node,
    lr_element   TYPE REF TO if_wd_context_element,
    lt_t_book    TYPE        wd_this->elements_t_book,
    lv_xml       TYPE        string,
    lv_xxml      TYPE        xstring.

* Get the selected booking id
  lr_bookingid ?= r_param->value.

* Get reference of the node
  lr_t_book = wd_context->get_child_node( name = wd_this->wdctx_t_book ).
  IF lr_t_book IS NOT INITIAL.
* Get the table with the elements attributes
    lr_t_book->get_static_attributes_table( IMPORTING table = lt_t_book ).
* Search for the line and get the element
  READ TABLE lt_t_book WITH KEY bookingid = lr_bookingid->*
  IF sy-subrc = 0.
* Returns the XML representation of the selected element
    lr_element = lr_t_book->get_element( index = sy-tabix ).

    lv_xml = lr_element->to_xml( ).
* Converts the string to xstring
    lv_xxml = wd_this->convert_file( lv_xml ).
* Shows it in a new browser window
      i_filename      = lco_filename
      i_content       = lv_xxml
      i_mime_type     = lco_mime_type
      i_in_new_window = abap_true
      i_inplace       = abap_true ).


METHOD wddomodifyview .
  wd_this->build_alv( ).

Window W_MAIN

Now in the window W_MAIN, embed the view Table from component use CMP_ALV to the view VI_MAIN (open the tree structure right click on VI_MAIN and Embed View).

Component Usages

In the component usages, select the CMP_ALV and in the INTERFACECONTROLLER define an external mapping with the node T_BOOK of COMPONENTCONTROLLER (click on button Controller Usage, select the component controller, right click on the DATA node, select the option Define external mapping and select the node T_BOOK).

Activating and creating a Web Dynpro Application

To finish, activate all objects and create a web dynpro application (right click on the web dynpro component).

Just save and test it, the result must be like the first figure of this tutorial. 


  1. Unknown User (101f9vkft)

    Great example Peter.  Thanks for making it available on this wiki!

    Is there a reason why you put the build_alv( ) call in the wddomodifyview method instead of in the wddoinit method?

  2. Unknown User (mk8p6lz)

    thats great!! thanks a lot.