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.