ALV and Select Options

The following section details and describes the modality to use the standard components ALV and SO as assistance,in creating our own Web Dynpro applications.We start from a simple example,where ALV is used to display the data in a table,and we end by using both components for advanced search and display the searched data, disposing of the extra functionalities offered by ALV (e.g. exporting data in Excel).

SAP List Viewer(ALV) is a tool we c.an use to display data in a two-dimensional table,in a hierarchical-sequential list or in a tree structure.It allows us to use it in a large range of applications,from the classical Dynpros to the Web Dynpro.

In our examples,we use inWeb Dynpro the ALV component SALV_WD_TABLE to display data in a two-dimensional table.

Through “Select Options”,we can benefit of complex searching possibilities.For example,we use the WDR_SELECT_OPTIONS component to create a selection option screen that offers,
in the same time, four standard buttons:Cancel,Reset, Done and Check.

SAP List Viewer

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.

CL_SALV_WD_CONFIG_TABLE

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( ).
  ENDIF.
  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_column_settings~delete_column('ID_PERSON').
  lr_table->if_salv_wd_table_settings~set_design(cl_wd_table=>e_designalternating
  ).
  lr_table->if_salv_wd_table_settings~set_visible_row_count(5 ).
  lr_field =
  lr_table->if_salv_wd_field_settings~get_field('ID_COUNTRY').
  lr_field->if_salv_wd_sort~create_sort_rule( ).
  ENDMETHOD.

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 method create_sort_rule from the IF_SALV_WD_INTERFACE interface.
The default sorting rule is:

sort_order = if_salv_wd_c_sort => sort_order_asscending

Runtime

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(
  'ID_COUNTRY').
  CREATE OBJECT lr_link_to_url.
  lr_link_to_url->set_text_fieldname('ID_COUNTRY').
  lr_link_to_url->set_reference(
  lr_column->set_cell_editor(lr_link_to_url).

Runtime

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_SETTINGS interface.

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

Runtime

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').
  linktoaction->set_editor(lr_linktoaction).

Runtime

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

Select Options

We create a WD component that offers complex possibilities to search for a candidate.To be able to use these complex search possibilities,we have used the WDR_SELECT_OPTIONS component.

Figure shows the WD component structure and the usage definition.

The WD component structure

We create,in Context view,the node PERSON with the same structure (Cardinality 0...n, dictionary structure YPERSON, Singleton,  without supply function).
In View Layout,we have to insert a View Container UIElement required to integrate the interface view WND_SELECTION_SCREEN of the Select Option component.Besides this UI element, we need a Button and a Table UI element.

Context view and view layout

How to define the usage

We create two attributes: M_HANDLER type ref to IF_WD_SELECT_ OPTIONS and M_WD_SELECT_OPTIONS type ref to IWCI_WDR_SELECT_ OPTIONS.

Attributes

We use the wdDoInit Hook method to instantiate the used component WDR_SELECT_OPTIONS, in order to dynamically create a range table and to add a selection screen Field.

The wdDoInit Hook method

 METHOD wddoinit .
 DATA:
 rt_range_table TYPE REF TO data,
 lv_tooltip TYPE string VALUE'Search for id',
 lv_abap_bool TYPE boolean VALUE abap_true,
 lr_componentcontroller TYPE REF TO ig_componentcontroller,
 lr_cmp_usage TYPE REF TO if_wd_component_usage.
 lr_cmp_usage = wd_this->wd_cpuse_select_options( ).
 IF lr_cmp_usage->has_active_component( ) IS INITIAL.
 lr_cmp_usage->create_component( ).
 ENDIF.
 wd_this->m_wd_select_options =
 wd_this->wd_cpifc_select_options( ).
 wd_this->m_handler =
 wd_this->m_wd_select_options->init_selection_screen( ).
 rt_range_table =
 wd_this->m_handler->create_range_table(
 i_typename = 'YIDI').
 wd_this->m_handler->add_selection_field(
 i_id = 'ID_PERSON'
 i_obligatory = lv_abap_bool
 it_result = rt_range_table
 i_tooltip = lv_tooltip
 i_value_help_type = if_wd_value_help_handler=>co_prefix_searchhelp
 i_value_help_id ='YSH_ID_PERSON'
  ).
 ENDMETHOD.

By using the method INIT_SELECTION_SCREEN of the IWCI_WDR_SELECT_OPTIONS interface,we initialize the selection screen.After this, we use the method CREATE_RANGE_TABLE of the IF_WD_SELECT_OPTIONS

interface to dynamically create a Range Table. This method has three importing parameters: I_TYPENAME type STRING,I_LENGTH type I,I_DECIMALS type I and a returning parameter RT_RANGE_TABLE type ref to data.The I_TYPENAME is not optional;we use it to specify the data element for the LOW and HIGH component. The ID_PERSON has the data type YIDI.

Database table YPERSON

A Range Table has four components: SIGN,OPTION,LOW and SCREEN. It can be also created in the ABAP Dictionary,as special type of table types.

The method ADD_SELECTION_FIELD of the IF_WD_SELECT_OPTIONS interface adds an additional Field to the Selection Screen. This method has many parameters, but only one is mandatory – I_ID.We have used the:

• i_id parameter,of STRING type,to define the ID of the Selection Field
• i_obligatory parameter,of ABAP_BOOL type,to set the mandatory field
• it_result parameter,type ref to data, for reference to the Range table
• i_tooltip,of STRING type, to create a quick info in a tooltip form
• i_value_help_type, of type:IF_WD_VALUE_HELP_HANDLER)CO_PREFIX_NONE
• to specify the type of the search help that we want to use
• i_value_help_id of WDY_VALUE_HELP_ID type,to specify the name of the search help that we use, or the name of the OVS (Object Value Selector) field ID_PERSON has associated the search helpwith the name YSH_ID_PERSON

When the user presses the Search button,the Framework triggers the event handler method onactionsearch.

The onactionsearch event handler method

  METHOD onactionsearch .
  DATA: l_node TYPE REF TO if_wd_context_node.
  DATA: rt_range_table TYPE REF TO data.
  DATA: it_yperson TYPE TABLE OF yperson.
  FIELD-SYMBOLS: <fs_id_person> TYPE ANY TABLE.
  rt_range_table = wd_this->m_handler->get_range_table_of_sel_field
  i_id = 'ID_PERSON' ).
  ASSIGN rt_range_table->* TO <fs_id_person>.
  CLEAR it_yperson.
  REFRESH it_yperson.
  SELECT * INTO CORRESPONDING FIELDS OF TABLE it_yperson
  FROM yperson
  WHERE id_person IN <fs_id_person>.
  l_node = wd_context->get_child_node(name =`PERSON`).
  l_node->bind_elements(it_yperson).
  ENDMETHOD.

The method GET_RANGE_TABLE_OF_SEL_FIELD of the IF_WD_ SELECT_OPTIONS interface has an importing parameter I_ID, of STRING type,and returns the range table for the Selection Field – rt_range_table generic type data. We define a field symbol typified as ANY TABLE and we generically dereference the data reference variable typed with data into our field symbol,through the dereferencing operator“->*”.

After this, we select all the records that correspond to our search and pass these values in the corresponding attributes of the context node PERSON. We have to embed the interface view WND_SELECTION_SCREEN into the ViewContainerUIElement.Now we are ready to run our application.

Embedding the view interface WND_SELECTION_SCREEN

Runtime

In default mode,Select Option is the interval between two values,but we can also use other Select options.

Selecting options

As we have seen,the component WND_SELECTION_SCREEN offers four buttons to provide four functions:

• Cancel
• Check
• Reset
• Execute

We can hide one of these buttons by using the method SET_GLOBAL_OPTIONS of the IF_WD_SELECT_OPTIONS interface.

This method has four mandatory parameters of ABAP_BOOL type.

The SET_GLOBAL_OPTIONS parameters

We want to extend our example,by hiding the buttons CANCEL, RESET,COPY and using the CHECK button to trigger the event handler method on_check.In this case,we don’t use our Search button.We implement the code in the on_check event handler method.

First, we must use,in the wdDoInit Hook method,the SET_GLOBAL_OPTIONS.

The wdDoInit Hook method

  METHOD wddoinit .
  ……………….
  wd_this->m_handler =
  wd_this->m_wd_select_options->init_selection_screen( ).
  wd_this->m_handler->set_global_options(
  i_display_btn_cancel = abap_false
  i_display_btn_check = abap_true
  i_display_btn_reset = abap_false
  i_display_btn_execute = abap_false).
  ……………………
  ENDMETHOD

After this,we create an event handler method named on_check and we register to the ON_CHECK event in the WDR_SELECT_OPTION component.This event is triggered when the user clicks the CHECK button.

Registering to the ON_CHECK event

We copy the entire coding from the onactionsearch event handler method in the on_check event handler method, and then we can run our application.

Runtime

To create more than one selection screens Field,we have to create,into the wdDoInit Hook Method,as many range tables as many screen Fields we need,and then we have to extend the event handler method to be able to select the desired data.

ALV and Select Options

In this case,we use both components: WDR_SELECT_OPTIONS for Select option and SALV_WD_TABLE for ALV .

Used components

We copy the preceding WD component and rename it:Y_ALV_AND_SO.
Here we made only some changes:

• Create the context node in the COMPONENTCONTROLLER
• Delete the Table UI element and insert a new View Container UI Element required to embed the Table interface view
• Define the required usages;
• Define the required context mappings;
• Check if the instance of the used component ALV_USAGE is made. If it doesn’t exist,we have to create one

View Layout

Window structure

ALV and SO