Samples / Controls / sap.m

Combo box - Search in both columns

Combo box dropdown list with search functionality which checks both columns. When you need to display additional information on your options, like e.g. keys of countries or system abbreviations, and want to search in those as well.

Class
z2ui5_cl_smpc_app_479
Repository
abap2UI5/samples-controls
Ports
sap.m.sample.ComboBoxSearchBoth
UI5 libraries
sap.m, sap.ui.core, sap.ui.layout
Lowest UI5 release
1.71
In the browser
Runs in the playground
Controls it builds
sap.m.ComboBox, sap.m.Label, sap.m.Page, sap.m.Text, sap.ui.core.ListItem, sap.ui.core.mvc.View, sap.ui.layout.VerticalLayout

The class

" @keywords combobox combo box sap.m comboboxsearchboth verticallayout listitem label text
" @summary Combo box dropdown list with search functionality which checks both columns. When you need to display additional information on your options, like e.g. keys of countries or system abbreviations, and want to search in those as well.
" @origin sap.m.sample.ComboBoxSearchBoth - https://sdk.openui5.org/entity/sap.m.ComboBox/sample/sap.m.sample.ComboBoxSearchBoth (status: generated - machine-written, not yet reviewed)
CLASS z2ui5_cl_smpc_app_479 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_country,
        key  TYPE string,
        text TYPE string,
      END OF ty_s_country.
    TYPES ty_t_country TYPE STANDARD TABLE OF ty_s_country WITH EMPTY KEY.

    DATA t_countries TYPE ty_t_country.

    DATA comboboxvalue TYPE string.
    DATA comboboxkey   TYPE string.
    DATA formatted     TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_479 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      model_init( ).
      view_display( ).
    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    view->ele( n = `View` ns = `mvc`
        )->a( n = `height`     v = `100%`
        )->a( n = `xmlns:core` v = `sap.ui.core`
        )->a( n = `xmlns:mvc`  v = `sap.ui.core.mvc`
        )->a( n = `xmlns:l`    v = `sap.ui.layout`
        )->a( n = `xmlns`      v = `sap.m`

        )->ele( `Page`
            )->a( n = `showHeader` v = `false`
            )->a( n = `class`      v = `sapUiContentPadding`

            )->ele( `content`
                )->ele( n = `VerticalLayout` ns = `l`

                    )->ele( `ComboBox`
                        )->a( n = `id`                    v = `idComboBox`
                        )->a( n = `showSecondaryValues`   v = `true`
                        )->a( n = `filterSecondaryValues` v = `true`
                        )->a( n = `value`                 v = client->_bind( comboboxvalue )
                        )->a( n = `selectedKey`           v = client->_bind( comboboxkey )
                        " fnFormatter joins value and key - a formatter is business logic,
                        " so the text is composed in ABAP; the change wire is what tells
                        " the backend to recompute it
                        )->a( n = `change`                v = client->_event( `CHANGE` )
                        )->a( n = `items`                 v = |\{ path: '{ client->_bind_path( t_countries ) }', sorter: \{ path: 'TEXT' \} \}|

                        )->tag( n = `ListItem` ns = `core`
                            )->a( n = `key`            v = `{KEY}`
                            )->a( n = `text`           v = `{TEXT}`
                            )->a( n = `additionalText` v = `{KEY}`

                    )->end(

                    )->tag( `Label`
                        )->a( n = `text`     v = `Formatted value (text and key):`
                        )->a( n = `labelFor` v = `idComboBox`
                    )->tag( `Text`
                        )->a( n = `text` v = client->_bind( formatted ) ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.


  METHOD on_event.

    IF client->get_event( ) = `CHANGE`.

      " fnFormatter: "text (key)" when both are there, otherwise whichever one is
      formatted = COND string( WHEN comboboxvalue IS NOT INITIAL AND comboboxkey IS NOT INITIAL
                               THEN |{ comboboxvalue } ({ comboboxkey })|
                               WHEN comboboxvalue IS NOT INITIAL THEN comboboxvalue
                               WHEN comboboxkey IS NOT INITIAL THEN comboboxkey
                               ELSE `` ).

    ENDIF.

  ENDMETHOD.


  METHOD model_init.

    " full mock /CountriesCollection of ui5/mock/countriesExtendedCollection.json
    t_countries = VALUE #(
        ( key = `DZ`  text = `Algeria` )
        ( key = `AR`  text = `Argentina` )
        ( key = `AU`  text = `Australia` )
        ( key = `AT`  text = `Austria` )
        ( key = `BH`  text = `Bahrain` )
        ( key = `BE`  text = `Belgium` )
        ( key = `BA`  text = `Bosnia and Herzegovina` )
        ( key = `BR`  text = `Brazil` )
        ( key = `BG`  text = `Bulgaria` )
        ( key = `CA`  text = `Canada` )
        ( key = `CL`  text = `Chile` )
        ( key = `CO`  text = `Colombia` )
        ( key = `HR`  text = `Croatia` )
        ( key = `CU`  text = `Cuba` )
        ( key = `CZ`  text = `Czech Republic` )
        ( key = `DK`  text = `Denmark` )
        ( key = `EG`  text = `Egypt` )
        ( key = `EE`  text = `Estonia` )
        ( key = `FI`  text = `Finland` )
        ( key = `FR`  text = `France` )
        ( key = `GER` text = `Germany` )
        ( key = `GH`  text = `Ghana` )
        ( key = `GR`  text = `Greece` )
        ( key = `HU`  text = `Hungary` )
        ( key = `IN`  text = `India` )
        ( key = `ID`  text = `Indonesia` )
        ( key = `IE`  text = `Ireland` )
        ( key = `IL`  text = `Israel` )
        ( key = `IT`  text = `Italy` )
        ( key = `JP`  text = `Japan` )
        ( key = `JO`  text = `Jordan` )
        ( key = `KE`  text = `Kenya` )
        ( key = `KW`  text = `Kuwait` )
        ( key = `LV`  text = `Latvia` )
        ( key = `LT`  text = `Lithuania` )
        ( key = `MK`  text = `Macedonia` )
        ( key = `MY`  text = `Malaysia` )
        ( key = `MX`  text = `Mexico` )
        ( key = `ME`  text = `Montenegro` )
        ( key = `MA`  text = `Morocco` )
        ( key = `NL`  text = `Netherlands` )
        ( key = `NZ`  text = `New Zealand` )
        ( key = `NG`  text = `Nigeria` )
        ( key = `NO`  text = `Norway` )
        ( key = `OM`  text = `Oman` )
        ( key = `PE`  text = `Peru` )
        ( key = `PH`  text = `Philippines` )
        ( key = `PL`  text = `Poland` )
        ( key = `PT`  text = `Portugal` )
        ( key = `QA`  text = `Qatar` )
        ( key = `RO`  text = `Romania` )
        ( key = `RU`  text = `Russia` )
        ( key = `SA`  text = `Saudi Arabia` )
        ( key = `SN`  text = `Senegal` )
        ( key = `RS`  text = `Serbia` )
        ( key = `SG`  text = `Singapore` )
        ( key = `SK`  text = `Slovakia` )
        ( key = `SI`  text = `Slovenia` )
        ( key = `ZA`  text = `South Africa` )
        ( key = `KR`  text = `South Korea` )
        ( key = `ES`  text = `Spain` )
        ( key = `SE`  text = `Sweden` )
        ( key = `CH`  text = `Switzerland` )
        ( key = `TN`  text = `Tunisia` )
        ( key = `TR`  text = `Turkey` )
        ( key = `UG`  text = `Uganda` )
        ( key = `UA`  text = `Ukraine` )
        ( key = `AE`  text = `United Arab Emirates` )
        ( key = `GB`  text = `United Kingdom` )
        ( key = `YE`  text = `Yemen` ) ).

  ENDMETHOD.

ENDCLASS.