web dynpro abap – using ui elements in alv component cells

Web Dynpro ABAP – Using UI Elements in ALV Component Cells

Applies to: SAP NetWeaver Web Dynpro ABAP.

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

Author: David Fernandes Pietroniro

Company: CSCorp

Created on: 02 July 2008

Author Bio David Fernandes Pietroniro works with ABAP since 2003, nowadays he’s developing NetWeaver products using new technologies like KPRO, ABAP OO, Web dynpro and PI-XI.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com © 2008 SAP AG 1


Table of Contents Introduction .........................................................................................................................................................3 The application ...................................................................................................................................................3 Creating the web dynpro component..................................................................................................................4

Component controller......................................................................................................................................4 Creating the node ........................................................................................................................................................4 Changing the node structure........................................................................................................................................6 Coding the SUPPLY method........................................................................................................................................6

View VI_MAIN .................................................................................................................................................7 Defining the used components.....................................................................................................................................7 View layout...................................................................................................................................................................8 Context ........................................................................................................................................................................8 Methods .......................................................................................................................................................................8 Method BUILD_ALV.....................................................................................................................................................8 Method CONVERT_FILE.............................................................................................................................................9 Method DETAILS .........................................................................................................................................................9 Method WDDOMODIFYVIEW....................................................................................................................................10

Window W_MAIN ..........................................................................................................................................10 Component Usages ......................................................................................................................................11

Activating and creating a Web Dynpro Application ..........................................................................................11 Related Content................................................................................................................................................12 Disclaimer and Liability Notice..........................................................................................................................13



Introduction

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.

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

The result of this will be the following:



Creating the web dynpro component Go to the Object Navigator (transaction SE80) and create a new web dynpro component:

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. DATA: lt_book TYPE STANDARD TABLE OF bapisbodat WITH NON-UNIQUE DEFAULT KEY, 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. FIELD-SYMBOLS <fs_book> LIKE LINE OF lt_book.



CALL FUNCTION 'BAPI_FLBOOKING_GETLIST' TABLES 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`. ELSE. ls_book_aux-cancelled = `~Icon/CheckedOk`. ENDIF. APPEND ls_book_aux TO lt_book_aux. ENDLOOP. * 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 ). ENDIF. ENDMETHOD.

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

View VI_MAIN

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.

Context

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

Methods

Now code the methods like follows:

Method BUILD_ALV

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. DATA: 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. FIELD-SYMBOLS <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( ). ENDIF. * 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. WHEN 'BOOKINGID'. CREATE OBJECT lr_link. lr_link->set_text_fieldname( <fs_column>-id ). <fs_column>-r_column->set_cell_editor( lr_link ). WHEN 'RESERVED'.



CREATE OBJECT lr_checkbox EXPORTING checked_fieldname = <fs_column>-id. <fs_column>-r_column->set_cell_editor( lr_checkbox ). FREE lr_checkbox. WHEN 'CANCELLED'. CREATE OBJECT lr_image. lr_image->set_source_fieldname( <fs_column>-id ). <fs_column>-r_column->set_cell_editor( lr_image ). FREE lr_image. ENDCASE. ENDLOOP. ENDMETHOD.

Method CONVERT_FILE

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 . CONSTANTS lc_utf TYPE abap_encoding VALUE 'UTF-8'. DATA: 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 ). ENDMETHOD.

Method DETAILS

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. CONSTANTS: lco_filename TYPE string VALUE `TEST.XML`, lco_mime_type TYPE string VALUE `text/xml`. DATA: 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 ). ENDIF. * Search for the line and get the element READ TABLE lt_t_book WITH KEY bookingid = lr_bookingid->* TRANSPORTING NO FIELDS. 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 cl_wd_runtime_services=>attach_file_to_response( i_filename = lco_filename i_content = lv_xxml i_mime_type = lco_mime_type i_in_new_window = abap_true i_inplace = abap_true ). ENDIF. ENDMETHOD.

Method WDDOMODIFYVIEW

METHOD wddomodifyview . wd_this->build_alv( ). ENDMETHOD.

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

The web dynpro application must contains the following properties:

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



Related Content SAP Help Documentation

User Interface Development with Web Dynpro for ABAP

Web Dynpro for ABAP - Get Started


http://help.sap.com/saphelp_nw04s/helpdata/en/74/fd4142646ab46be10000000a155106/frameset.htm

https://www.sdn.sap.com/irj/sdn/nw-wdabap#section2

https://www.sdn.sap.com/irj/sdn/nw-ui?rid=/webcontent/uuid/00545e6d-0679-2910-acab-8073ce9a1659



Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

web dynpro abap – using ui elements in alv component cells

Documents