Numeric Content Without Margins

This is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.

Z2UI5_CL_SMPC_APP_390

Controls sap.m UI5 1.71

The facts

Repository: abap2UI5/samples-controls
Class: Z2UI5_CL_SMPC_APP_390
Source file: z2ui5_cl_smpc_app_390.clas.abap ↗
Library: sap.m
UI5 entity: sap.m.NumericContent
Demo kit sample: sap.m.sample.NumericContentWithoutMargin
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: numericcontent, numeric, content, sap.m, numericcontentwithoutmargin, label

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_390.clas.abap — 99 lines Read it on GitHub ↗

" @keywords numericcontent numeric content sap.m numericcontentwithoutmargin label
" @summary This is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.
CLASS z2ui5_cl_smpc_app_390 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_390 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`     v = `sap.m`
        )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

        )->tag( `Label`
            )->a( n = `text` v = `Numeric content with margins`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `true`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Good`
            )->a( n = `indicator`  v = `Up`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `true`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `6666`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Critical`
            )->a( n = `indicator`  v = `Up`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `true`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Error`
            )->a( n = `indicator`  v = `Down`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `true`

        )->tag( `Label`
            )->a( n = `text` v = `Numeric content without margins`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `false`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Good`
            )->a( n = `indicator`  v = `Up`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `false`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `6666`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Critical`
            )->a( n = `indicator`  v = `Up`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `false`
        )->tag( `NumericContent`
            )->a( n = `value`      v = `65.5`
            )->a( n = `scale`      v = `MM`
            )->a( n = `valueColor` v = `Error`
            )->a( n = `indicator`  v = `Down`
            )->a( n = `class`      v = `sapUiSmallMargin`
            )->a( n = `withMargin` v = `false` ).

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

  ENDMETHOD.

ENDCLASS.