abap2UI5

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 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

Search every abap2UI5 sample · the full list on one page

On this page