TextArea - Value Update
Since 1.30 the value property of sap.m.TextArea 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_280
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_280- Source file
z2ui5_cl_smpc_app_280.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.TextArea- Demo kit sample
sap.m.sample.TextAreaValueUpdate- 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: textarea, text, area, sap.m, textareavalueupdate, simpleform, label, switch
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_280.clas.abap — 92 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords textarea text area sap.m textareavalueupdate simpleform label switch
" @summary Since 1.30 the value property of sap.m.TextArea 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_280 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA value_live_update TYPE abap_bool.
DATA input_value TYPE string.
DATA get_value TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_280 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
get_value = ` `.
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 = `xmlns` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->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`
)->tag( `TextArea`
)->a( n = `id` v = `TypeHere`
)->a( n = `value` v = client->_bind( input_value )
)->a( n = `valueLiveUpdate` v = client->_bind( value_live_update )
)->a( n = `liveChange` v = client->_event( val = `LIVE_CHANGE` arg = `${$parameters>/value}` )
)->tag( `Label`
)->a( n = `text` v = `input.getValue()`
)->tag( `Text`
)->a( n = `id` v = `getValue`
)->a( n = `text` v = client->_bind( get_value )
)->tag( `Label`
)->a( n = `text` v = `model.getProperty()`
)->tag( `Text`
)->a( n = `id` v = `getProperty`
)->a( n = `text` v = client->_bind( input_value ) ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
IF client->get_event( ) = `LIVE_CHANGE`.
" the original controller writes the event's value into the getValue Text,
" deliberately bypassing the model - here it is the backend that holds it
get_value = client->get_event_arg( ).
ENDIF.
ENDMETHOD.
ENDCLASS.
More in sap.m
- Dialog - Fullscreen — A dialog that can be toggled to fullscreen mode through a header button, by double-clicki…
- Tile Statuses — Shows the GenericTile while it is loading, if loading fails, and in disabled status.
- List - Growing — The Growing feature helps if your content is too big to be loaded/shown at once. It pagin…
- Table - ContextualWidth (Dynamic) — This example shows the container-based pop-in behavior. The container has dynamic width.
- Message Box — MessageBox is an easy way of displaying a message-type dialog to the user. You can displa…
- Image error handling with IllustratedMessage — Handle errors using the sap.m.IllustratedMessage with the error event.
- MultiComboBox - showSelectAll functionality — MultiComboBox with enabled Select All feature inside suggestions.
- Message View inside Dialog — A sample with Message View placed inside a Dialog.
- Popover in Custom Within Area — Within area of sap.ui.core.Popup determines where all popups (including popovers) are pos…
- Breadcrumbs sample with current page link — Breadcrumbs sample with current page set as aggregation, resulting in a link
- Icon Tab Bar - Badges — This sample illustrates the possibility to add badges to the icon tab filters.
- PDF Viewer - Embedded — A PDF viewer embedded in another control.
On this page