abap2UI5

Control Busy Indicator

A control's busy indicator can be used to block parts of the screen until an operation has finished. In this example we block the content of only one out of two panels.

Z2UI5_CL_SMPC_APP_130

Controls sap.ui.core UI5 1.71

The facts

Repository
abap2UI5/samples-controls
Class
Z2UI5_CL_SMPC_APP_130
Source file
z2ui5_cl_smpc_app_130.clas.abap
Library
sap.ui.core
UI5 entity
sap.ui.core.Control
Demo kit sample
sap.ui.core.sample.ControlBusyIndicator
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: sap.ui.core, busyindicator, toolbar, button, panel, toolbarspacer, text, icon

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_130.clas.abap — 112 lines Read it on GitHub ↗
" @keywords sap.ui.core busyindicator toolbar button panel toolbarspacer text icon
" @summary A control's busy indicator can be used to block parts of the screen until an operation has finished. In this example we block the content of only one out of two panels.
CLASS z2ui5_cl_smpc_app_130 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA busy TYPE abap_bool.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_130 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      busy = abap_false.
      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 = `height`     v = `100%`
        )->a( n = `xmlns:core` v = `sap.ui.core`
        )->a( n = `xmlns:mvc`  v = `sap.ui.core.mvc`
        )->a( n = `xmlns`      v = `sap.m`

        )->ele( `Page`
            )->a( n = `class`      v = `sapUiFioriObjectPage`
            )->a( n = `showHeader` v = `false`

            )->ele( `content`
                )->ele( `Toolbar`
                    )->tag( `Button`
                        )->a( n = `icon`  v = `sap-icon://action`
                        )->a( n = `text`  v = `Toggle Busy State of Both Controls`
                        )->a( n = `press` v = client->_event( `TOGGLE_BUSY` )

                )->end(

                )->ele( `Panel`
                    )->a( n = `id`                 v = `panel1`
                    )->a( n = `busy`               v = client->_bind( busy )
                    )->a( n = `busyIndicatorDelay` v = `0`
                    )->a( n = `headerText`         v = `Default BusyIndicator (No Delay)`

                    )->tag( `ToolbarSpacer`
                    )->ele( `content`
                        )->tag( `Text`
                            )->a( n = `text` v = `Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et ` &&
                                                 `accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur ` &&
                                                 `sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing ` &&
                                                 `elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`

                    )->end(
                )->end(

                )->ele( `Panel`
                    )->a( n = `id`         v = `panel2`
                    )->a( n = `headerText` v = `Small BusyIndicator (Default Delay)`

                    )->tag( n = `Icon` ns = `core`
                        )->a( n = `id`    v = `panel2-icon`
                        )->a( n = `busy`  v = client->_bind( busy )
                        )->a( n = `src`   v = `sap-icon://nutrition-activity`
                        )->a( n = `size`  v = `3rem`
                        )->a( n = `color` v = `#DD0000` ).

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

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).

      WHEN `TOGGLE_BUSY`.
        " original onAction: sets both controls busy, then clears them again
        " after a 5s setTimeout - START_TIMER fires the clearing round trip
        busy = abap_true.
        client->follow_up_action( val   = client->cs_event-start_timer
                                  t_arg = VALUE #( ( `CLEAR_BUSY` ) ( `5000` ) ) ).

      WHEN `CLEAR_BUSY`.
        " the timer callback - the setTimeout body
        busy = abap_false.

    ENDCASE.

  ENDMETHOD.

ENDCLASS.

More in sap.ui.core

Search every abap2UI5 sample · the full list on one page

On this page