Samples / Controls / sap.m

Fiori Object Page - Standard Classes

This page implements the same sample as in 'Fiori Sample Page - sapUiFioriObjectPage' using standard margin classes.

Class
z2ui5_cl_smpc_app_089
Repository
abap2UI5/samples-controls
Ports
sap.m.sample.PageStandardClasses
UI5 libraries
sap.m, sap.ui.core, sap.ui.layout
Lowest UI5 release
1.71
In the browser
Runs in the playground
Controls it builds
sap.m.FeedInput, sap.m.IconTabBar, sap.m.IconTabFilter, sap.m.Label, sap.m.List, sap.m.ObjectAttribute, sap.m.ObjectHeader, sap.m.ObjectStatus, sap.m.Page, sap.m.Panel, sap.m.Table, sap.m.Text, sap.ui.core.Title, sap.ui.core.mvc.View, sap.ui.layout.form.SimpleForm

The class

" @keywords sap.m standard responsive css classes objectheader objectattribute objectstatus icontabbar icontabfilter simpleform title
" @summary This page implements the same sample as in 'Fiori Sample Page - sapUiFioriObjectPage' using standard margin classes.
" @origin sap.m.sample.PageStandardClasses - https://sdk.openui5.org/entity/sap.m.Page/sample/sap.m.sample.PageStandardClasses (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_089 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_product,
        name          TYPE string,
        price         TYPE p LENGTH 8 DECIMALS 2,
        currencycode  TYPE string,
        weightmeasure TYPE string,
        weightunit    TYPE string,
        width         TYPE string,
        depth         TYPE string,
        height        TYPE string,
        dimunit       TYPE string,
      END OF ty_s_product.
    DATA s_product TYPE ty_s_product.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_089 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      model_init( ).
      view_display( ).
    ELSEIF 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 = `height`     v = `100%`
        )->a( n = `xmlns:form` v = `sap.ui.layout.form`
        )->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 = `id`      v = `idPage`
            )->a( n = `title`   v = ` Product XY`
            )->a( n = `class`   v = `sapUiResponsivePadding--header`
            " element binding kept 1:1 - a one-record structure /S_PRODUCT instead of {/ProductCollection/0}
            )->a( n = `binding` v = client->_bind( s_product )

            )->ele( `content`
                )->ele( `ObjectHeader`
                    )->a( n = `title`            v = `{NAME}`
                    )->a( n = `backgroundDesign` v = `Solid`
                    )->a( n = `number`           v = |\{ parts:[\{path:'PRICE'\},\{path:'CURRENCYCODE'\}], type: 'sap.ui.model.type.Currency', formatOptions: \{showMeasure: false\} \}|
                    )->a( n = `numberUnit`       v = `{CURRENCYCODE}`
                    )->ele( `attributes`
                        )->tag( `ObjectAttribute`
                            )->a( n = `title` v = `Weight`
                            )->a( n = `text`  v = `{WEIGHTMEASURE} {WEIGHTUNIT}`
                        )->tag( `ObjectAttribute`
                            )->a( n = `title` v = `Dimensions`
                            )->a( n = `text`  v = `{WIDTH} x {DEPTH} X {HEIGHT} {DIMUNIT}`

                    )->end(
                    )->ele( `statuses`
                        )->tag( `ObjectStatus`
                            )->a( n = `title` v = `Status`
                            )->a( n = `text`  v = `In Stock`
                            )->a( n = `state` v = `Success`

                    )->end(
                )->end(

                )->ele( `IconTabBar`
                    " the original's isNoPhone is a demo-kit helper the framework's raw
                    " device> model does not carry; !phone expresses the same (app 030)
                    )->a( n = `expanded` v = `{= !${device>/system/phone} }`
                    )->a( n = `class`    v = `sapUiSmallMarginBottom sapUiResponsiveContentPadding`
                    )->ele( `items`
                        )->ele( `IconTabFilter`
                            )->a( n = `key`  v = `info`
                            )->a( n = `text` v = `Info`
                            )->ele( n = `SimpleForm` ns = `form`
                                )->a( n = `layout` v = `ResponsiveGridLayout`
                                )->ele( n = `title` ns = `form`
                                    )->tag( n = `Title` ns = `core`
                                        )->a( n = `text` v = `A Form`

                                )->end(
                                )->tag( `Label`
                                    )->a( n = `text` v = `Label`
                                )->tag( `Text`
                                    )->a( n = `text` v = `Value`

                            )->end(
                        )->end(
                        )->ele( `IconTabFilter`
                            )->a( n = `key`  v = `attachments`
                            )->a( n = `text` v = `Attachments`
                            )->tag( `List`
                                )->a( n = `headerText`     v = `A List`
                                )->a( n = `showSeparators` v = `Inner`

                        )->end(
                        )->ele( `IconTabFilter`
                            )->a( n = `key`  v = `notes`
                            )->a( n = `text` v = `Notes`
                            )->tag( `FeedInput`

                        )->end(
                    )->end(
                )->end(

                )->ele( n = `SimpleForm` ns = `form`
                    )->a( n = `layout` v = `ResponsiveGridLayout`
                    )->a( n = `class`  v = `sapUiForceWidthAuto sapUiResponsiveMargin`
                    )->ele( n = `title` ns = `form`
                        )->tag( n = `Title` ns = `core`
                            )->a( n = `text` v = `A Form`

                    )->end(
                    )->tag( `Label`
                        )->a( n = `text` v = `Label`
                    )->tag( `Text`
                        )->a( n = `text` v = `Value`

                )->end(

                )->tag( `List`
                    )->a( n = `headerText`       v = `A List`
                    )->a( n = `backgroundDesign` v = `Translucent`
                    )->a( n = `width`            v = `auto`
                    )->a( n = `class`            v = `sapUiResponsiveMargin`
                )->tag( `Table`
                    )->a( n = `headerText` v = `A Table`
                    )->a( n = `width`      v = `auto`
                    )->a( n = `class`      v = `sapUiResponsiveMargin`
                )->tag( `Panel`
                    )->a( n = `headerText` v = `A Panel`
                    )->a( n = `width`      v = `auto`
                    )->a( n = `class`      v = `sapUiResponsiveMargin`

            )->end(
        )->end( ).

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

  ENDMETHOD.


  METHOD model_init.

    " the bound record /ProductCollection/0 (Notebook Basic 15) of ui5/mock/products.json, verbatim
    s_product = VALUE #( name         = `Notebook Basic 15`
                         price        = '956.00'
                         currencycode = `EUR`
                         weightmeasure = `4.2` weightunit = `KG`
                         width          = `30`  depth       = `18`
                         height         = `3`   dimunit    = `cm` ).

  ENDMETHOD.

ENDCLASS.