Samples / Controls / sap.m

Message View with Grouping

A sample with Message View and inside a Dialog and grouping of items

Class
z2ui5_cl_smpc_app_294
Repository
abap2UI5/samples-controls
Ports
sap.m.sample.MessageViewWithGrouping
UI5 libraries
sap.m, sap.ui.core
Lowest UI5 release
1.71
In the browser
Runs in the playground
Controls it builds
sap.m.Bar, sap.m.Button, sap.m.Dialog, sap.m.Link, sap.m.MessageItem, sap.m.MessageView, sap.m.OverflowToolbar, sap.m.Page, sap.m.Text, sap.m.ToolbarSpacer, sap.ui.core.FragmentDefinition, sap.ui.core.mvc.View

The class

" @keywords messageview message sap.m messageviewwithgrouping overflowtoolbar button toolbarspacer dialog bar text messageitem link
" @summary A sample with Message View and inside a Dialog and grouping of items
" @origin sap.m.sample.MessageViewWithGrouping - https://sdk.openui5.org/entity/sap.m.MessageView/sample/sap.m.sample.MessageViewWithGrouping (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_294 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_message,
        type        TYPE string,
        title       TYPE string,
        description TYPE string,
        subtitle    TYPE string,
        counter     TYPE i,
        group       TYPE string,
      END OF ty_s_message.
    TYPES ty_t_message TYPE STANDARD TABLE OF ty_s_message WITH EMPTY KEY.

    DATA t_messages   TYPE ty_t_message.
    " the three formatters, computed once in the backend (see model_init)
    DATA button_icon  TYPE string.
    DATA button_type  TYPE string.
    DATA button_text  TYPE string.
    DATA back_visible TYPE abap_bool.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.
    METHODS popup_display.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


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

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

            )->ele( `content`

            )->end(

            )->ele( `footer`
                )->ele( `OverflowToolbar`

                    )->tag( `Button`
                        )->a( n = `id`    v = `messageViewBtn`
                        )->a( n = `icon`  v = client->_bind( button_icon )
                        )->a( n = `type`  v = client->_bind( button_type )
                        )->a( n = `text`  v = client->_bind( button_text )
                        )->a( n = `press` v = client->_event( `MESSAGE_VIEW` )
                    )->tag( `ToolbarSpacer` ).

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

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).

      WHEN `MESSAGE_VIEW`.
        " handleMessageViewPress navigates the MessageView back and opens the
        " dialog; the popup is rebuilt here, so it always opens on the list page
        back_visible = abap_false.
        popup_display( ).

      WHEN `ITEM_SELECT`.
        back_visible = abap_true.

      WHEN `NAV_BACK`.
        back_visible = abap_false.
        client->follow_up_action( val   = client->cs_event-control_by_id
                                  view  = client->cs_view-popup
                                  t_arg = VALUE #( ( `messageView` ) ( `navigateBack` ) ) ).

      WHEN `CLOSE`.
        client->popup_destroy( ).

    ENDCASE.

  ENDMETHOD.


  METHOD popup_display.

    DATA(popup) = z2ui5_cl_ui5_view_builder=>factory( ).

    popup->ele( n = `FragmentDefinition` ns = `core`
        )->a( n = `xmlns:core` v = `sap.ui.core`
        )->a( n = `xmlns`      v = `sap.m`

        )->ele( `Dialog`
            )->a( n = `contentHeight`     v = `50%`
            )->a( n = `contentWidth`      v = `50%`
            )->a( n = `verticalScrolling` v = `false`

            )->ele( `customHeader`

                )->ele( `Bar`

                    )->ele( `contentLeft`
                        )->tag( `Button`
                            )->a( n = `icon`    v = `sap-icon://nav-back`
                            )->a( n = `visible` v = client->_bind( back_visible )
                            )->a( n = `press`   v = client->_event( `NAV_BACK` )

                    )->end(

                    )->ele( `contentMiddle`
                        )->tag( `Text`
                            )->a( n = `text` v = `Publish order`

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

            )->ele( `content`

                )->ele( `MessageView`
                    )->a( n = `id`                    v = `messageView`
                    )->a( n = `showDetailsPageHeader` v = `false`
                    )->a( n = `groupItems`            v = `true`
                    )->a( n = `items`                 v = client->_bind( t_messages )
                    )->a( n = `itemSelect`            v = client->_event( `ITEM_SELECT` )

                    )->ele( `items`

                        )->ele( `MessageItem`
                            )->a( n = `type`        v = `{TYPE}`
                            )->a( n = `title`       v = `{TITLE}`
                            )->a( n = `description` v = `{DESCRIPTION}`
                            )->a( n = `subtitle`    v = `{SUBTITLE}`
                            )->a( n = `counter`     v = `{COUNTER}`
                            )->a( n = `groupName`   v = `{GROUP}`

                            )->ele( `link`
                                )->tag( `Link`
                                    )->a( n = `text`   v = `Show more information`
                                    )->a( n = `href`   v = `http://sap.com`
                                    )->a( n = `target` v = `_blank`

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

            )->ele( `endButton`
                )->tag( `Button`
                    )->a( n = `text`  v = `Close`
                    )->a( n = `press` v = client->_event( `CLOSE` ) ).

    client->popup_display( popup->stringify( ) ).

  ENDMETHOD.


  METHOD model_init.

    DATA(desc) = `First Error message description. ` && |\n| &&
                      `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod` &&
                      `tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,` &&
                      `quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo` &&
                      `consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse` &&
                      `cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non` &&
                      `proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`.

    " the controller's aMockMessages
    t_messages = VALUE #(
      ( type        = `Error`
        title       = `Account 801 requires an assignment`
        subtitle    = `Role is invalid`
        group       = `Purchase Order 450001`
        description = desc )
      ( type        = `Warning`
        title       = `Account 821 requires a check`
        subtitle    = `Undefined task`
        group       = `Purchase Order 450001`
        description = desc )
      ( type        = `Warning`
        title       = `Enter a text with maximum 6 characters length`
        group       = `Purchase Order 450002`
        description = desc )
      ( type        = `Warning`
        title       = `Enter a text with maximum 8 characters length`
        group       = `Purchase Order 450002`
        description = desc )
      ( type        = `Error`
        title       = `Account 802 requires an assignment`
        subtitle    = `Role is invalid`
        group       = `Purchase Order 450002`
        description = desc )
      ( type        = `Information`
        title       = `Account 804 requires an assignment`
        subtitle    = `Information type subtitle`
        group       = `Purchase Order 450002`
        description = desc )
      ( type        = `Error`
        title       = `Technical message without object relation`
        group       = `General`
        description = desc )
      ( type        = `Warning`
        title       = `Global System will be down on Sunday`
        group       = `General`
        description = desc )
      ( type        = `Error`
        title       = `Global System will be down on Sunday`
        group       = `General`
        description = desc )
      ( type        = `Error`
        title       = `An Error`
        subtitle    = `Ungrouped message`
        description = desc )
      ( type        = `Warning`
        title       = `A Warning`
        subtitle    = `Ungrouped message`
        description = desc ) ).

    " buttonIconFormatter / buttonTypeFormatter / highestSeverityMessages walk
    " the whole message list and pick the highest severity (Error > Warning >
    " Success > Information) plus how many messages carry it. That is a
    " computation over the data, so it happens here and the Button binds the
    " finished values (thin-frontend rule, apps 009/010/022/092)
    DATA(top) = `Information`.
    LOOP AT t_messages INTO DATA(s_message).
      CASE s_message-type.
        WHEN `Error`.
          top = `Error`.
        WHEN `Warning`.
          IF top <> `Error`.
            top = `Warning`.
          ENDIF.
        WHEN `Success`.
          IF top <> `Error` AND top <> `Warning`.
            top = `Success`.
          ENDIF.
      ENDCASE.
    ENDLOOP.

    CASE top.
      WHEN `Error`.
        button_icon = `sap-icon://message-error`.
        button_type = `Negative`.
      WHEN `Warning`.
        button_icon = `sap-icon://message-warning`.
        button_type = `Critical`.
      WHEN `Success`.
        button_icon = `sap-icon://message-success`.
        button_type = `Success`.
      WHEN OTHERS.
        button_icon = `sap-icon://message-information`.
        button_type = `Neutral`.
    ENDCASE.

    button_text = |{ REDUCE i( INIT x = 0 FOR s_row IN t_messages NEXT x = COND #( WHEN s_row-type = top THEN x + 1 ELSE x ) ) }|.

  ENDMETHOD.

ENDCLASS.