Select Options 2.0 für Web Dynpro

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:

SelOpt20_1

 

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

SelOpt20_2

 

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:

SelOpt20_3

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.
   DATAlt_attributes   TYPE wdr_so_t_attributes,
         lt_initial_data TYPE wdr_so_t_values.
   DATAlt_saved_searches TYPE wdr_context_attr_value_list.
   DATAwa_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_componentabap_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_optionsgeneral_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_elemdescrcl_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_elemdescrcl_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_elemdescrcl_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_attributesattributes   lt_attributes
                                                  initial_data lt_initial_data ).
 
   FREElt_saved_searcheslt_attributeslt_initial_data.
   CLEARwa_general_textswa_general_visibilitywa_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:

SelOpt20_4

 

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:

SelOpt20_5

 

In die ON_EXECUTE_SEARCH Methode kommt nun folgender Code:

METHOD on_execute_search.
   DATAlt_ranges TYPE wdr_so_t_range_ref.
   DATAlv_max_rows TYPE i.
   DATAlv_select_all TYPE abap_bool.
 
 * Get search restrictions
   wd_this->ao_selection_handler->get_input_complete_as_rangeIMPORTING range_ref         lt_ranges
                                                                         max_nr_of_results lv_max_rows
                                                                         select_all        lv_select_all ).
 
   CLEARlv_max_rowslv_select_all.
   FREElt_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

Posted on 21. März 2015 in Blog, Web Dynpro/ABAP

Back to Top