Samples / Learn / Popup

Popup

A NavContainer inside a dialog: several pages in one popup, with back and forward between them.

Class
z2ui5_cl_smp_app_170
Repository
abap2UI5/samples
UI5 libraries
sap.m, sap.ui.core
Lowest UI5 release
1.71
In the browser
Runs in the playground
Controls it builds
sap.m.Button, sap.m.Dialog, sap.m.IconTabBar, sap.m.IconTabFilter, sap.m.Label, sap.m.MessageStrip, sap.m.NavContainer, sap.m.Page, sap.m.Shell, sap.m.VBox, sap.ui.core.FragmentDefinition, sap.ui.core.mvc.View
Documentation
cookbook/popup_popover/popup ↗

The class

" @keywords navcontainer dialog pages back forward icontabbar control_by_id popup_display
" @summary A NavContainer inside a dialog: several pages in one popup, with back and forward between them.
" @docs https://abap2ui5.github.io/docs/cookbook/popup_popover/popup
CLASS z2ui5_cl_smp_app_170 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA mv_selected_key TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.
    METHODS simple_popup1.
    METHODS simple_popup2.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smp_app_170 IMPLEMENTATION.

  METHOD simple_popup1.

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

    DATA(dialog) = popup->ele( `Dialog`
        )->a( n = `stretch`    b = abap_true
        )->a( n = `afterClose` v = client->_event( `BTN_OK_1ND` )
        )->ele( `content` ).

    dialog->ele( `IconTabBar`
        )->a( n = `select`      v = client->follow_up_action( val   = client->cs_event-control_by_id
                                                              view  = client->cs_view-popup
                                                              t_arg = VALUE #( ( `NavCon` ) ( `to` ) ( `${$parameters>/selectedKey}` ) ) )
        )->a( n = `expandable`  b = abap_false
        )->a( n = `expanded`    b = abap_true
        )->a( n = `headerMode`  v = `Inline`
        )->a( n = `selectedKey` v = client->_bind( mv_selected_key )
        )->ele( `items`
            )->ele( `IconTabFilter`
                )->a( n = `text` v = `Home`
                )->a( n = `key`  v = `page1`
            )->end(
            )->ele( `IconTabFilter`
                )->a( n = `text` v = `Applications`
                )->a( n = `key`  v = `page2`
            )->end(
            )->ele( `IconTabFilter`
                )->a( n = `text` v = `Users and Groups`
                )->a( n = `key`  v = `page3`
            )->end(
        )->end(
        )->ele( `content`
            )->ele( `VBox`
                )->a( n = `height` v = `100%`
                )->ele( `NavContainer`
                    )->a( n = `initialPage`           v = `page1`
                    )->a( n = `id`                    v = `NavCon`
                    )->a( n = `height`                v = `400px`
                    )->a( n = `defaultTransitionName` v = `flip`
                    )->ele( `pages`
                        )->ele( `Page`
                            )->a( n = `title` v = `first page`
                            )->a( n = `id`    v = `page1`
                            )->tag( `Button`
                                )->a( n = `press` v = client->_event( `GOTO_2ND` )
                                )->a( n = `text`  v = `Open 2nd popup`
                        )->end(
                        )->ele( `Page`
                            )->a( n = `title` v = `second page`
                            )->a( n = `id`    v = `page2`
                        )->end(
                        )->ele( `Page`
                            )->a( n = `title` v = `third page`
                            )->a( n = `id`    v = `page3` ).

    dialog->end(
        )->ele( `buttons`
            )->tag( `Button`
                )->a( n = `press` v = client->_event( `BTN_OK_1ND` )
                )->a( n = `text`  v = `OK`
                )->a( n = `type`  v = `Emphasized` ).

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

  ENDMETHOD.


  METHOD simple_popup2.

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

    DATA(dialog) = popup->ele( `Dialog`
        )->a( n = `afterClose` v = client->_event( `BTN_OK_2ND` )
        )->ele( `content` ).

    dialog->tag( `Label`
        )->a( n = `text` v = `this is a second popup` ).

    dialog->end(
        )->ele( `buttons`
            )->tag( `Button`
                )->a( n = `press` v = client->_event( `BTN_OK_2ND` )
                )->a( n = `text`  v = `GOTO 1ST POPUP`
                )->a( n = `type`  v = `Emphasized` ).

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

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
        )->ele( n = `View` ns = `mvc`
            )->a( n = `displayBlock` v = `true`
            )->a( n = `height`       v = `100%`
            )->a( n = `xmlns`        v = `sap.m`
            )->a( n = `xmlns:mvc`    v = `sap.ui.core.mvc` ).
    DATA(page) = view->ele( `Shell`
        )->ele( `Page`
            )->a( n = `title`          v = `abap2UI5 - Popup - Navigate between Dialogs (NavContainer)`
            )->a( n = `showNavButton`  b = client->check_app_prev_stack( )
            )->a( n = `navButtonPress` v = client->_event_nav_app_leave( ) ).

    page->tag( `MessageStrip`
        )->a( n = `text`     v = `Open the dialog and pick its tabs: each tab switches the NavContainer inside the dialog ` &&
                   `to another page, on the client - the select event calls the container's to method by id ` &&
                   `(follow_up_action with cs_event-control_by_id), no roundtrip. The first page also opens a second ` &&
                   `popup, whose button brings the first one back.`
        )->a( n = `type`     v = `Information`
        )->a( n = `showIcon` b = abap_true
        )->a( n = `class`    v = `sapUiSmallMargin` ).

    page->tag( `Button`
        )->a( n = `press` v = client->_event( `POPUP` )
        )->a( n = `text`  v = `Open Popup...` ).

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

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).
      WHEN `GOTO_2ND`.
        simple_popup2( ).

      WHEN `BTN_OK_2ND`.
        client->popup_destroy( ).
        simple_popup1( ).

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

      WHEN `POPUP`.
        simple_popup1( ).
    ENDCASE.

  ENDMETHOD.


  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_navigated( ).
      view_display( ).

    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.

ENDCLASS.