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
- sap.m.Button
- sap.m.Page
- sap.m.Panel
- sap.m.Text
- sap.m.Toolbar
- sap.m.ToolbarSpacer
- sap.ui.core.Icon
- sap.ui.core.mvc.View
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
Click a number to link to a line — shift-click for a range.
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
- No Container Content Padding — Many UI5 containers support the standard container content padding CSS classes. Apply the…
- Margins All Around — Use standard margin classes 'sapUiTinyMargin', 'sapUiSmallMargin', 'sapUiMediumMargin' or…
- HTML — With the HTML controls you can easily embed any kind of HTML content into your UI5 mobile…
- Icon — Built with an embedded font, icons scale well, and can be altered with CSS. They can also…
- InvisibleText — Many controls provide the associations ariaLabelledBy and ariaDescribedBy for accessibili…
- Integer Format — Formats and parses only the integer digits. The decimal digits are ignored.
- Basic Theme Parameters — Sample provides a link to the Theme Parameter Toolbox. There you can easily search, previ…
- Currency Format — Formats the number by using the parameters defined for the given currency code. Either cu…
- InvisibleMessage — The InvisibleMessage provides a way to programmaticaly expose dynamic content changes in…
- Hyphenation API — This sample demonstrates usage of the Hyphenation API
- Busy Indicator — A busy indicator can be used to block the entire screen until an operation has finished.
- Float Format — Formats and parses both integer and decimal digits.
On this page