SAP List Viewer SAP ABAP Web Dynpro

In this subchapter,through some examples, we will meet the SALV_WD_TABLE standard component and its advantages.

Simple ALV Example

We create a WD component that displays all the information about candidates by using the SALV_WD_TABLE,ALV component. To be able to use this component, we have to firstly define a usage. Figure shows the WD component structure and the usage definition

WD component structure

In the COMPONENTCONTROLLER,we create a node PERSON with thedictionary structure YPERSON,Singleton, Cardinality 0...n and supply function SUPPLY_PERSON.

Context node and supply function

View layout

In this case,we have chosen to use a ViewContainerUIElement to embed the Table view of the SALV_WD_TABLE component,but we can embed a view or an interface view directly in a Window if we don’t need additional UI elements.The table view is the central view of an ALV component and represents the container in which the ALV output is displayed.Figure shows the Window structure and the selected Interface View.

Window structure and interface views of the ALV

To be able to create a reverse mapping, we firstly create an interface controller usage.

Interface controller usage

Then,we need to provide the DATA context node with the values from the PERSON context node.

Context mapping

DATA context node must contain the structure and data of the ALV output.The runtime result is presented.

Runtime result

As we have mentioned above,the ALV component offers new capabilities,as follows:

  • Exporting the data displayed into Microsoft Excel,by using the Export button
  • Printing a version in PDF format,by using the Print Version button
  • Simple data filter, by using the Filter option
  • Complex settings, by using the Settings option

The settings option offers the capability to hide some columns, to create complex searches and complex filters,to change the display mode and to create a print version. We can save the changes we made and assign them to the current user as an initial view.

Settings option

ALV settings

ALV Configuration Model

To configure an ALV output,we can use: table settings, column settings,field settings,standard function settings or application-specific function settings.

By using the transaction SE24,
we can see the structure of the CL_SALV_WD_CONFIG_TABLE. Here,we find the interfaces and their methods to be used to manipulate the ALV output.


Manipulating the ALV Output:Deleting Rows, Hiding Columns,Table Designing,Sorting

We want to manipulate the ALV output to show only five rows, to use the Table Design Alternating to sort table ascending by the id_country field and to hide the first two columns, Client and ID.We use the below example, where we make some changes. We define a usage at the V_VIEW level.

Defining the usage at the View level

The wdDoInit Hook method

METHOD wddoinit .
DATA: lr_cmp_usage TYPE REF TO if_wd_component_usage,
lr_salv_wd_table TYPE REF TO iwci_salv_wd_table,
lr_table TYPE REF TO cl_salv_wd_config_table,
lr_field TYPE REF TO cl_salv_wd_field.
lr_cmp_usage = wd_this->wd_cpuse_alv_usage( ).
IF lr_cmp_usage->has_active_component( ) IS INITIAL.
lr_cmp_usage->create_component( ).
lr_salv_wd_table = wd_this->wd_cpifc_alv_usage( ).
lr_table = lr_salv_wd_table->get_model( ).
lr_table->if_salv_wd_column_settings~delete_column('MANDT' ).
lr_table->if_salv_wd_table_settings~set_visible_row_count(5 ).
lr_field =
lr_field->if_salv_wd_sort~create_sort_rule( ).

As we can see,we have used the method GET_MODEL from the interface IWCI_SALV_WD_TABLE.This method has no importing parameters and returns a complete Configuration Model(CL_SALV_WD_CONFIG_TABLE).

The ALV component is partly based on the Table UI element.To set the Table design and the number of visible rows,we use the methods set_design and,respectively,set_visible_row_count from the interface IF_SALV_WD_TABLE_SETTINGS.

If we look at the dynamic programming of a Table UI element,we can see that the property for the Table design alternating is cl_wd_table) e_designalternating, and the property VISIBLE_ROW_COUNT is an integer number(in our case, 5).

To delete the two columns, we use the method delete_column from IF_SALV_WD_COLUMN_SETTINGS interface, and to create asort rule we use the methodcreate_sort_rule from the IF_SALV_WD_INTERFACE interface.
The default sorting rule is:

sort_order = if_salv_wd_c_sort => sort_order_asscending


Changing the Cell Editor

As we know,the content of a cell to be displayed is specified by the table cell editor of the column. In the default mode,the table cells are created by using the TextView UI element.

We change the cell editor for the EU Countries column.In this case,we use a linkToURL UI element that opens the web page where we can find all the information about the EU countries.To do this,we need to add some coding at the below example.We need to dynamically create a linkToURL UI element. The Listing shows the additional coding in the wdDoInit Hook method.

Changing the cell edito

DATA:lr_column TYPE REF TO cl_salv_wd_column,
lr_link_to_url TYPE REF TO cl_salv_wd_uie_link_to_url.
lr_column = lr_table->if_salv_wd_column_settings~get_column(
CREATE OBJECT lr_link_to_url.


Adding a Header for the ALV Table

For an ALV table,we can add a header,too.To do this,we have to use the method CREATE_HEADER of the IF_SALV_WD_TABLE_SETTINGSinterface.

Header for ALV tabl

DATA:lr_settings_alv_table TYPE REF TO if_salv_wd_table_settings.
DATA: lr_alv_header TYPE REF TO cl_salv_wd_header.
lr_settings_alv_table ?= lr_table.
lr_alv_header = lr_settings_alv_table->get_header( ).
lr_alv_header->set_text('ALV Header').

Header for ALV table

Setting the Top of List and the End of List for the ALV Output

For an ALV output,we can create a top of list (header text) and an end of list (footer text).As we have seen, the ALV component we have used provides two context nodes,named TOP_OF_LIST and END_OF_LIST.These context nodes hold the data for header and footer. Each context node contains an attribute namedCONTENT of CL_SALV_FORM_ELEMENT type.

To be able to access these context nodes from our view V_VIEW, we have to create a context mapping.

Context mapping

Then,we have to define the basic layout and to create the elements. In our case,we have chosen to use the Row type layout,
class CL_SALV_FORM_LAYOUT_ FLOW.We create a text element for the header and a text element for the footer.

Header and footer for an ALV table

DATA lr_node_top_of_list TYPE REF TO if_wd_context_node.
DATA lr_node_end_of_list TYPE REF TO if_wd_context_node.
DATA lr_flow_top TYPE REF TO cl_salv_form_layout_flow.
DATA lr_flow_end TYPE REF TO cl_salv_form_layout_flow.
DATA lr_text_top TYPE REF TO cl_salv_form_text.
DATA lr_text_end TYPE REF TO cl_salv_form_text.
CREATE OBJECT lr_flow_top.
lr_text_top = lr_flow_top->create_text(
position = 1
text = 'Header Text'
tooltip = 'Top of list'
CREATE OBJECT lr_flow_end.
lr_text_end = lr_flow_end->create_text(
position = 1
text = 'Footer Text'
tooltip = 'End of list'
lr_node_top_of_list = wd_context->get_child_node( 'TOP_OF_LIST').
lr_node_top_of_list->set_attribute(value = lr_flow_top
name = 'CONTENT').
lr_node_end_of_list = wd_context->get_child_node( 'END_OF_LIST ').
lr_node_end_of_list->set_attribute(value = lr_flow_end
name = 'CONTENT').
lr_table-> if_salv_wd_table_settings~set_top_of_list_visible(value = abap_true).
lr_table-> if_salv_wd_table_settings~set_end_of_list_visible value = abap_true).


Adding a Self-Defined UI Element to the ALV Toolbar

On the ALV toolbar,we can add our own UI elements. We add a linkToAction UI element.

Adding a linkToAction UI element to the ALV toolbar

DATA lr_linktoaction TYPE REF TO cl_salv_wd_fe_link_to_action.
CREATE OBJECT lr_linktoaction.
lr_linktoaction->set_text('Our self-defined linkToAction').
DATA linktoaction TYPE REF TO cl_salv_wd_function.
linktoaction = lr_table-> if_salv_wd_function_settings~create_function(id ='LTA').


To transform our linkToAction into another UI element,we have to change the editor type from the linkToAction (CL_SALV_WD_FE_LINK_TO_ACTION) into another allowed type.For example,to have a button editor,we have to changee only the class name: CL_SALV_FE_BUTTON.

When the user presses this link,we have to trigger an event handler method.As we can see,we have not defined an action for this link. To know the UI element that was pressed,we use the ON_FUNCTION event.

We create an event handler method named LINKTOACTION_ACTION and we choose the event ON_FUNCTION.

Event handler method for our self-defined linkToAction

If our link with the ID = “LTA” is pressed,a statement block is executed.

Event handler method

Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

SAP ABAP Web Dynpro Topics