Samples / Controls / sap.m

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.

Class
z2ui5_cl_smpc_app_280
Repository
abap2UI5/samples-controls
Ports
sap.m.sample.TextAreaValueUpdate
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.Label, sap.m.Switch, sap.m.Text, sap.m.TextArea, sap.ui.core.mvc.View, sap.ui.layout.form.SimpleForm

The class

" @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.
" @origin sap.m.sample.TextAreaValueUpdate - https://sdk.openui5.org/entity/sap.m.TextArea/sample/sap.m.sample.TextAreaValueUpdate (status: checked - verified in a running system)
CLASS z2ui5_cl_smpc_app_280 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA valueliveupdate TYPE abap_bool.
    DATA inputvalue      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( valueliveupdate )

            )->tag( `Label`
                )->a( n = `text` v = `Type here`
            )->tag( `TextArea`
                )->a( n = `id`              v = `TypeHere`
                )->a( n = `value`           v = client->_bind( inputvalue )
                )->a( n = `valueLiveUpdate` v = client->_bind( valueliveupdate )
                )->a( n = `liveChange`      v = client->_event( val = `LIVE_CHANGE` arg = `${$parameters>/value}` s_ctrl = VALUE #( check_queue_last = abap_true check_no_busy = abap_true ) )

            )->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( inputvalue ) ).

    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.