Binding

The class

" @keywords formatter parts conditional regexp visible enabled syntax
" @summary Expression binding in the view - conditions, composite parts and a regular expression decide visible and enabled without asking the backend.
" @docs https://abap2ui5.github.io/docs/cookbook/model/expression_binding
CLASS z2ui5_cl_smp_app_027 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA product  TYPE string.
    DATA quantity TYPE i.
    DATA input2   TYPE string.
    DATA input31  TYPE i.
    DATA input32  TYPE i.
    DATA input41  TYPE string.
    DATA input51  TYPE string.
    DATA input52  TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smp_app_027 IMPLEMENTATION.


  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).

      product  = `tomato`.
      quantity = `500`.
      input41  = `faasdfdfsaVIp`.
      view_display( ).

    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
        )->ele( n = `View` ns = `mvc`
            )->a( n = `displayBlock` v = `true`
            )->a( n = `height`       v = `100%`
            )->a( n = `xmlns`        v = `sap.m`
            )->a( n = `xmlns:mvc`    v = `sap.ui.core.mvc`
            )->a( n = `xmlns:form`   v = `sap.ui.layout.form` ).
    DATA(page) = view->ele( `Shell`
        )->ele( `Page`
            )->a( n = `title`          v = `abap2UI5 - Binding - Expression Binding, Types and Composite Parts`
            )->a( n = `showNavButton`  b = client->check_app_prev_stack( )
            )->a( n = `navButtonPress` v = client->_event_nav_app_leave( ) ).

    page->tag( `MessageStrip`
        )->a( n = `text`     v = `Advanced binding syntax: expression binding, typed bindings, conditional enabling ` &&
                   `with RegExp checks, and composite (parts) bindings.`
        )->a( n = `type`     v = `Information`
        )->a( n = `showIcon` b = abap_true
        )->a( n = `class`    v = `sapUiSmallMargin` ).

    DATA(form) = page->ele( n = `SimpleForm` ns = `form`
        )->a( n = `title`    v = `Binding Syntax`
        )->a( n = `editable` b = abap_true
        )->ele( n = `content` ns = `form` ).

    form->tag( `Title`
        )->a( n = `text` v = `Expression Binding` ).

    form->tag( `Label`
        )->a( n = `text` v = `Documentation` ).

    form->tag( `Link`
        )->a( n = `text`   v = `Expression Binding`
        )->a( n = `href`   v = `https://sdk.openui5.org/topic/daf6852a04b44d118963968a1239d2c0`
        )->a( n = `target` v = `_blank` ).

    form->tag( `Label`
        )->a( n = `text` v = `input in uppercase` ).

    form->tag( `Input`
        )->a( n = `value` v = client->_bind( input2 ) ).

    form->tag( `Input`
        )->a( n = `enabled` b = abap_false
        )->a( n = `value`   v = |\{= ${ client->_bind( input2 ) }.toUpperCase() \}| ).

    form->tag( `Label`
        )->a( n = `text` v = `max value of the first two inputs` ).

    form->tag( `Input`
        )->a( n = `value` v = |\{ type : "sap.ui.model.type.Integer", path:"{ client->_bind( val = input31 path = abap_true ) }" \}| ).

    form->tag( `Input`
        )->a( n = `value` v = |\{ type : "sap.ui.model.type.Integer", path:"{ client->_bind( val = input32 path = abap_true ) }" \}| ).

    form->tag( `Input`
        )->a( n = `enabled` b = abap_false
        )->a( n = `value`   v = |\{= Math.max(${ client->_bind( input31 ) }, ${ client->_bind( input32 ) }) \}| ).

    form->tag( `Label`
        )->a( n = `text` v = `only enabled when the quantity equals 500` ).

    form->tag( `Input`
        )->a( n = `value` v = |\{ type : "sap.ui.model.type.Integer", path:"{ client->_bind( val = quantity path = abap_true ) }" \}| ).

    form->tag( `Input`
        )->a( n = `enabled` v = |\{= 500===${ client->_bind( quantity ) } \}|
        )->a( n = `value`   v = client->_bind( product ) ).

    form->tag( `Label`
        )->a( n = `text` v = `RegExp Set to enabled if the input contains VIP, ignoring the case.` ).

    form->tag( `Input`
        )->a( n = `value` v = client->_bind( input41 ) ).

    form->tag( `Button`
        )->a( n = `text`    v = `VIP`
        )->a( n = `enabled` v = |\{= RegExp('vip', 'i').test(${ client->_bind( input41 ) }) \}| ).

    form->tag( `Label`
        )->a( n = `text` v = `concatenate both inputs` ).

    form->tag( `Input`
        )->a( n = `value` v = client->_bind( input51 ) ).

    form->tag( `Input`
        )->a( n = `value` v = client->_bind( input52 ) ).

    form->tag( `Input`
        )->a( n = `enabled` b = abap_false
        )->a( n = `value`   v = |\{ parts: [ "{ client->_bind( val = input51 path = abap_true ) }", | &&
                                    |"{ client->_bind( val = input52 path = abap_true ) }" ] \}| ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.
ENDCLASS.