abap2UI5

Message Popover - Async Message Handling

The message handling concept sample shows how you can use callback functions for resolving a promise after a link or descriptions have been asynchronously validated.

Z2UI5_CL_SMPC_APP_067

Controls sap.m UI5 1.84

The facts

Repository
abap2UI5/samples-controls
Class
Z2UI5_CL_SMPC_APP_067
Source file
z2ui5_cl_smpc_app_067.clas.abap
Library
sap.m
UI5 entity
sap.m.MessagePopover
Demo kit sample
sap.m.sample.MessagePopoverAsyncMessageHandling
SAP's own sample
running at sdk.openui5.org ↗
Minimum UI5
1.84
In the playground
runs in the browser, with no system and nothing installed

Keywords: messagepopover, message, popover, sap.m, async, handling, overflowtoolbar, button, messageitem, link, toolbarspacer

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_067.clas.abap — 150 lines Read it on GitHub ↗
" @keywords messagepopover message popover sap.m async handling overflowtoolbar button messageitem link toolbarspacer
" @summary The message handling concept sample shows how you can use callback functions for resolving a promise after a link or descriptions have been asynchronously validated.
CLASS z2ui5_cl_smpc_app_067 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_message,
        type        TYPE string,
        title       TYPE string,
        active      TYPE abap_bool,
        description TYPE string,
        subtitle    TYPE string,
        counter     TYPE i,
      END OF ty_s_message.

    DATA t_messages    TYPE STANDARD TABLE OF ty_s_message WITH EMPTY KEY.
    DATA highest_icon  TYPE string.
    DATA highest_type  TYPE string.
    DATA highest_count TYPE i.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


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

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

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

                    )->ele( `Button`
                        )->a( n = `id`           v = `messagePopoverBtn`
                        )->a( n = `icon`         v = client->_bind( highest_icon )
                        )->a( n = `type`         v = client->_bind( highest_type )
                        )->a( n = `text`         v = client->_bind( highest_count )
                        )->a( n = `ariaHasPopup` v = `Dialog`
                        )->a( n = `press`        v = client->follow_up_action( val   = client->cs_event-control_by_id
                                                                               t_arg = VALUE #( ( `messagePopover` ) ( `toggleBy` ) ( `$event.oSource.sId` ) ) )

                        )->ele( `dependents`
                            )->ele( `MessagePopover`
                                )->a( n = `id`               v = `messagePopover`
                                )->a( n = `items`            v = client->_bind( t_messages )
                                )->a( n = `activeTitlePress` v = client->follow_up_action( val   = client->cs_event-control_global
                                                                                           t_arg = VALUE #( ( `MESSAGE_TOAST` ) ( `show` ) ( `Active title is pressed` ) ) )
                                " added wire (declared): the original attaches urlValidated in the
                                " controller and toasts after each async URL validation
                                )->a( n = `urlValidated`     v = client->follow_up_action( val   = client->cs_event-control_global
                                                                                           t_arg = VALUE #( ( `MESSAGE_TOAST` ) ( `show` ) ( `URL validation has been performed.` ) ) )
                                " added wire (declared): the original attaches longtextLoaded in
                                " the controller. MessageView fires it unconditionally on every
                                " drill-down (_navigateToDetails), so it is NOT gated on a
                                " longtextUrl the way setAsyncDescriptionHandler is
                                )->a( n = `longtextLoaded`   v = client->follow_up_action( val   = client->cs_event-control_global
                                                                                           t_arg = VALUE #( ( `MESSAGE_TOAST` ) ( `show` ) ( `Description validation has been performed.` ) ) )

                                )->ele( `MessageItem`
                                    )->a( n = `type`              v = `{TYPE}`
                                    )->a( n = `title`             v = `{TITLE}`
                                    )->a( n = `activeTitle`       v = `{ACTIVE}`
                                    )->a( n = `description`       v = `{DESCRIPTION}`
                                    )->a( n = `subtitle`          v = `{SUBTITLE}`
                                    )->a( n = `counter`           v = `{COUNTER}`
                                    )->a( n = `markupDescription` v = `true`

                                    )->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(

                    )->tag( `ToolbarSpacer`

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

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

    " original setAsyncURLHandler: allowed = url.lastIndexOf('http', 0) < 0 -
    " the framework's built-in RELATIVE_ONLY policy (relative links allowed,
    " absolute ones disabled) covers the demo's exact case declaratively
    client->follow_up_action( val   = client->cs_event-control_by_id
                              t_arg = VALUE #( ( `messagePopover` ) ( `setAsyncURLHandler` ) ( `RELATIVE_ONLY` ) ) ).

  ENDMETHOD.


  METHOD model_init.

    t_messages = VALUE #(
      ( type = `Error` title = `Error message` active = abap_true counter = 1 subtitle = `Example of subtitle`
        description = `<h2>Heading h2</h2><p>Paragraph. At vero eos et accusamus et iusto odio dignissimos ducimus qui ...</p>` &&
                      `<ul><li>Unordered list item 1 <a href="http://sap.com/some/url">Absolute URL that is disabled after validation.</a></li>` &&
                      `<li>Unordered list item 2</li></ul>` &&
                      `<ol><li>Ordered list item 1 <a href="#">Relative URL that is allowed after validation.</a></li>` &&
                      `<li>Ordered list item 2</li></ol>` )
      ( type = `Warning` title = `Warning without description` description = `` )
      ( type = `Success` title = `Success message` counter = 1 subtitle = `Example of subtitle`
        description = `First Success message description` )
      ( type = `Error` title = `Error message` counter = 2 subtitle = `Example of subtitle`
        description = `Second Error message description` )
      ( type = `Information` title = `Information message` counter = 1 subtitle = `Example of subtitle`
        description = `First Information message description` ) ).

    highest_icon  = `sap-icon://error`.
    highest_type  = `Negative`.
    highest_count = 2.

  ENDMETHOD.

ENDCLASS.

More in sap.m

Search every abap2UI5 sample · the full list on one page

On this page