Input - Value Update
Since 1.24 the value property of sap.m.Input is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.
Z2UI5_CL_SMPC_APP_462
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_462- Source file
z2ui5_cl_smpc_app_462.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.Input- Demo kit sample
sap.m.sample.InputValueUpdate- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: input, sap.m, inputvalueupdate, simpleform, label, switch, text
Controls it builds
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_462.clas.abap — 76 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords input sap.m inputvalueupdate simpleform label switch text
" @summary Since 1.24 the value property of sap.m.Input is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.
CLASS z2ui5_cl_smpc_app_462 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA value_live_update TYPE abap_bool.
DATA input_value TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_462 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `ValueLiveUpdate`
)->tag( `Switch`
)->a( n = `state` v = client->_bind( value_live_update )
)->tag( `Label`
)->a( n = `text` v = `Type here`
" onLiveChange writes the value into the Text below - the only leg of the
" sample that cannot be a binding, since it must show what getValue( )
" returns even while valueLiveUpdate keeps the model value behind.
" It needs no round-trip either: setText on the Text by id, with the
" keystroke value as the argument, is the same write done on the client
)->tag( `Input`
)->a( n = `value` v = client->_bind( input_value )
)->a( n = `valueLiveUpdate` v = client->_bind( value_live_update )
)->a( n = `liveChange` v = client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `getValue` ) ( `setText` ) ( `${$parameters>/value}` ) ) )
)->tag( `Label`
)->a( n = `text` v = `oInput.getValue()`
" no text of its own, exactly as the original: the Text is written
" by the liveChange wire alone
)->tag( `Text`
)->a( n = `id` v = `getValue`
)->tag( `Label`
)->a( n = `text` v = `oModel.getProperty()`
)->tag( `Text`
)->a( n = `text` v = client->_bind( input_value ) ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Input - Assisted Two Values — This example shows how to easily implement an assisted input with two-value suggestions.
- MultiInput Data Binding — MultiInput data binding allows data to be bound to tokens in MultiInput.
- MultiComboBox - Two columns layout — Use the dropdown list with two columns layout if you need to display additional informati…
- MultiComboBox - Filtering and Suggestions — The default filtering is 'starts with per term', which filters by the beginning of every…
- Input - Suggestions - Custom — The default filtering for the suggestionItems aggregation uses a 'begins with' style oper…
- MultiInput with Max Tokens — Number of Tokens in MultiInput cannot exceed the maxToken number.
- Combo box - Default Filtering — The default filtering is 'starts with per term', which filters by the beginning of every…
- Icon Tab Bar - Overflow Behavior — In this example when there is not enough space for all tab items to fit on the screen, th…
- Icon Tab Bar - Start and End Overflow — This sample illustrates the start and end overflow mode of the Icon Tab Bar.
- Icon Tab Bar - Inline mode tab icons — This sample illustrates tab icons for inline mode.
- Standard List Item - Icon — This list item offers a standardized user interface for list content with title, descript…
- Combo box - Custom filtering "Contains" — You can override the default filtering "Starts with per term" with your own filter functi…
On this page