Mit den UI Guidelines 2.0 hat SAP unter anderem auch eine neue Select-Options Komponente für Web Dynpro/ABAP veröffentlicht. Die Optik der neuen Select-Options orientiert sich sehr stark an der WebUI Variante. In diesem kleinen HowTo möchte ich zeigen wie einfach es ist die neue Select-Options Komponente in einer eigenen Web Dynpro Anwendung zu nutzen.

Für mein kleines Beispiel lege ich zuerst eine neue Web Dynpro Komponente mit dem Namen Y0_TEST_SEL_OPT_20 an. Unter Used Components wird nun gleich die Select-Options Komponente WD_SELECT_OPTIONS_20 mit dem Use Name CMP_SELECT_OPTIONS eingebunden. Dies sieht dann wie folgt aus:

Als nächstes erzeuge ich am View ein ViewContainerUIElement und weise diesem am Window die Komponente W_SELECT_OPTIONS zu.

Unser Applikation ist nun fertig konfiguriert um die neuen Select-Options anzeigen zu können. Damit dass reibungslos klappt fehlt allerdings noch ein wenig Coding. Das wollen wir nun einbauen. Dazu legen wir am View die Methode INIT_SELECT_OPTIONS an und rufen diese aus der WDDOINIT Methode auf.

METHOD wddoinit.
* Call select-options init method
  wd_this->init_select_options( ).
ENDMETHOD.

Bevor wir nun mit der Implementierung der Methode INIT_SELECT_OPTIONS beginnen können, müssen wir dem View die zu benutzende Komponente bekannt geben:

Zusätzlich legen wir am Reiter Attributes das Attribute AO_SELECTION_HANDLER RefTo IF_WD_SELECT_OPTIONS_20 an. In diesem Attribut speichern wir später den Selection Handler der Select-Options Komponente.

Nun können wir die Methode INIT_SELECT_OPTIONS implementieren. Für unser Beispiel wollen wir Daten aus der CRM Tabelle BUT000 lesen. Die Suche soll die Felder Partner, Type und Name (Name Org/Name Last) bereitstellen. Zusätzlich soll das Feld Type mit 2 (Organization) vorbelegt werden. Das Coding hierfür sieht wie folgt aus:

METHOD init_select_options.
   DATA: lt_attributes   TYPE wdr_so_t_attributes,
         lt_initial_data TYPE wdr_so_t_values.
   DATA: lt_saved_searches TYPE wdr_context_attr_value_list.
   DATA: wa_general_texts      TYPE wdr_so_s_general_texts,
         wa_general_visibility TYPE wdr_so_s_general_visibility,
         wa_global_options     TYPE wdr_so_s_global_options.
 
   FIELD-SYMBOLS: <wa_attributes> TYPE wdr_so_s_attributes.
 
 * Create select options
   IF wd_this->wd_cpuse_cmp_select_options( )->has_active_component( ) = abap_false.
     wd_this->wd_cpuse_cmp_select_options( )->create_component( ).
   ENDIF.
 
 * Set general visibility
   wa_general_visibility-show_max_nr_rows = abap_true.
   wa_general_visibility-show_button_search = abap_true.
   wa_general_visibility-show_button_reset = abap_true.
   wa_general_visibility-show_button_clear = abap_true.
   wa_general_visibility-button_search_is_default = abap_true.
   wa_general_visibility-show_header = abap_false.
 
 * Set global options
   wa_global_options-default_max_nr_rows = 100.
 
 * Get selection handler
   wd_this->ao_selection_handler = wd_this->wd_cpifc_cmp_select_options( )->init_select_options( general_texts      = wa_general_texts
                                                                                                 general_visibility = wa_general_visibility
                                                                                                 global_options     = wa_global_options
                                                                                                 saved_searches     = lt_saved_searches ).
 
 * Set search attributes
   APPEND INITIAL LINE TO lt_attributes ASSIGNING <wa_attributes>.
   <wa_attributes>-attribute = 'PARTNER'.
   <wa_attributes>-attr_type = if_wd_select_options_20=>e_attribute_types-text.
   <wa_attributes>-disp_index = 1.
   <wa_attributes>-value_suggest = abap_true.
   <wa_attributes>-rtti_type = CAST cl_abap_elemdescr( cl_abap_elemdescr=>describe_by_name( 'BU_PARTNER' ) ).
   UNASSIGN: <wa_attributes>.
 
   APPEND INITIAL LINE TO lt_attributes ASSIGNING <wa_attributes>.
   <wa_attributes>-attribute = 'TYPE'.
   <wa_attributes>-attr_type = if_wd_select_options_20=>e_attribute_types-dropdown.
   <wa_attributes>-disp_index = 2.
   <wa_attributes>-rtti_type = CAST cl_abap_elemdescr( cl_abap_elemdescr=>describe_by_name( 'BU_TYPE' ) ).
   UNASSIGN: <wa_attributes>.
 
   APPEND INITIAL LINE TO lt_attributes ASSIGNING <wa_attributes>.
   <wa_attributes>-attribute = 'MC_NAME1'.
   <wa_attributes>-attr_type = if_wd_select_options_20=>e_attribute_types-text.
   <wa_attributes>-disp_index = 3.
   <wa_attributes>-rtti_type = CAST cl_abap_elemdescr( cl_abap_elemdescr=>describe_by_name( 'BU_MCNAME1' ) ).
   UNASSIGN: <wa_attributes>.
 
 * Fill initial data
   APPEND INITIAL LINE TO lt_initial_data ASSIGNING FIELD-SYMBOL(<wa_initial_data>).
   <wa_initial_data>-attribute = 'TYPE'.
   <wa_initial_data>-sign = 'I'.
   <wa_initial_data>-operator = if_wd_select_options_20=>e_operators-is.
   <wa_initial_data>-low = 2.
   UNASSIGN: <wa_initial_data>.
 
 * Add attributes to search help
   wd_this->ao_selection_handler->add_attributes( attributes   = lt_attributes
                                                  initial_data = lt_initial_data ).
 
   FREE: lt_saved_searches, lt_attributes, lt_initial_data.
   CLEAR: wa_general_texts, wa_general_visibility, wa_global_options.
 ENDMETHOD.

Im ersten Abschnitt wird die Komponente Initialisiert. Danach werden die benötigten Buttons aktiviert und noch ein paar Optionen gesetzt. Der erzeugte Selection Handler wird dann im zuvor angelegten View Attribute abgelegt. Diesen Handler werden wir etwas weiter unten noch benötigen.

Als nächstes werden die drei Suchoptionen erzeugt. Die Felder Partner und Name sollen als normale Textboxen dargestellt werden. Das Feld Type als DropDown.

Bevor die Attribute der Select-Options Komponente übergeben werden, wird noch der Default Value für das Type Suchfeld gesetzt.

Sie können die Applikation nun das erste mal starten und sollten folgendes Resultat erhalten:

Sie können nun Werte in die Suchfelder eingeben und alle Buttons drücken. Leider passiert noch nichts wenn Sie den SEARCH Button betätigen. Dazu muss erst der ON_EXECUTE Event der Search-Options Komponente implementiert werden. Dies geschieht wieder direkt am View:

In die ON_EXECUTE_SEARCH Methode kommt nun folgender Code:

METHOD on_execute_search.
   DATA: lt_ranges TYPE wdr_so_t_range_ref.
   DATA: lv_max_rows TYPE i.
   DATA: lv_select_all TYPE abap_bool.
 
 * Get search restrictions
   wd_this->ao_selection_handler->get_input_complete_as_range( IMPORTING range_ref         = lt_ranges
                                                                         max_nr_of_results = lv_max_rows
                                                                         select_all        = lv_select_all ).
 
   CLEAR: lv_max_rows, lv_select_all.
   FREE: lt_ranges.
 ENDMETHOD.

Der Event wird ausgelöst sobald der Search Button gedrückt wurde. Der Selection Handler liefert neben den Selection Ranges auch die Max Rows und ob alle Datensätze angefordert wurden oder die Max Rows Einschränkung gilt.

Und damit sind wir auch schon am Ende. Mehr ist nicht notwendig um die neuen Select-Options in seiner eigenen Anwendung einzubinden. Als nächstes kann damit begonnen werden die benötigten Daten zu Lesen und auszugeben. Ein Beispiel dazu finden Sie hier: SELECT mit dynamischen RANGES