Nested View

The class

" @keywords fcl three column detail detail deep navigation nest_view_display nest2_view_display
" @summary The FlexibleColumnLayout with three columns - list, detail and detail-of-detail - and the navigation that opens each one.
" @docs https://abap2ui5.github.io/docs/cookbook/view/nested_views
CLASS z2ui5_cl_smp_app_098 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_row,
        title    TYPE string,
        value    TYPE string,
        descr    TYPE string,
        icon     TYPE string,
        info     TYPE string,
        selected TYPE abap_bool,
        checkbox TYPE abap_bool,
      END OF ty_s_row.

    DATA
      t_tab TYPE STANDARD TABLE OF ty_s_row WITH EMPTY KEY.
    DATA
      t_tab2 TYPE STANDARD TABLE OF ty_s_row WITH EMPTY KEY.

    DATA mv_layout TYPE string.
    DATA mv_title TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS on_event.
    METHODS view_display_master.
    METHODS view_display_detail.
    METHODS view_display_detail_detail.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smp_app_098 IMPLEMENTATION.

  METHOD view_display_detail.

    DATA(lo_view_nested) = 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`
            )->a( n = `xmlns:table`  v = `sap.ui.table` ).

    DATA(page) = lo_view_nested->ele( `Page`
        )->a( n = `title` v = `Nested View` ).

    DATA(tab) = page->ele( n = `Table` ns = `table`
        )->a( n = `rows`               v = client->_bind( val = t_tab2 )
        )->a( n = `alternateRowColors` b = abap_true
        )->a( n = `fixedColumnCount`   v = `1`
        )->a( n = `rowActionCount`     v = `1`
        )->a( n = `selectionMode`      v = `None` ).
    tab->ele( n = `extension` ns = `table`
        )->ele( `OverflowToolbar`
            )->tag( `Title`
                )->a( n = `text` v = `Products` ).
    DATA(lo_columns) = tab->ele( n = `columns` ns = `table` ).

    lo_columns->ele( n = `Column` ns = `table`
        )->a( n = `sortProperty`   v = `TITLE`
        )->a( n = `filterProperty` v = `TITLE`
        )->tag( `Text`
            )->a( n = `text` v = `Index`
        )->ele( n = `template` ns = `table`
            )->tag( `Text`
                )->a( n = `text` v = `{TITLE}` ).
    lo_columns->ele( n = `Column` ns = `table`
        )->a( n = `sortProperty`   v = `DESCR`
        )->a( n = `filterProperty` v = `DESCR`
        )->tag( `Text`
            )->a( n = `text` v = `DESCR`
        )->ele( n = `template` ns = `table`
            )->tag( `Text`
                )->a( n = `text` v = `{DESCR}` ).
    lo_columns->ele( n = `Column` ns = `table`
        )->a( n = `sortProperty`   v = `INFO`
        )->a( n = `filterProperty` v = `INFO`
        )->tag( `Text`
            )->a( n = `text` v = `INFO`
        )->ele( n = `template` ns = `table`
            )->tag( `Text`
                )->a( n = `text` v = `{INFO}` ).
    lo_columns->end(
        )->ele( n = `rowActionTemplate` ns = `table`
            )->ele( n = `RowAction` ns = `table`
                )->ele( n = `RowActionItem` ns = `table`
                    )->a( n = `type`  v = `Navigation`
                    )->a( n = `press` v = client->_event( val = `ROW_NAVIGATE` arg = `${TITLE}` ) ).

    client->nest_view_display(
      val            = lo_view_nested->stringify( )
      id             = `test`
      method_insert  = `addMidColumnPage`
      method_destroy = `removeAllMidColumnPages` ).

  ENDMETHOD.


  METHOD view_display_detail_detail.

    DATA(lo_view_nested) = 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) = lo_view_nested->ele( `Page`
        )->a( n = `title` v = `Nested View` ).

    page->tag( `Text`
        )->a( n = `text` v = client->_bind( mv_title ) ).

    page->tag( `Button`
        )->a( n = `press` v = client->_event( `NN_VIEW` )
        )->a( n = `text`  v = `frontend event` ).

    client->nest2_view_display(
      val            = lo_view_nested->stringify( )
      id             = `test`
      method_insert  = `addEndColumnPage`
      method_destroy = `removeAllEndColumnPages` ).

  ENDMETHOD.


  METHOD view_display_master.

    DATA(page) = 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`
            )->a( n = `xmlns:f`      v = `sap.f`
            )->ele( `Shell`
                )->ele( `Page`
                    )->a( n = `title`          v = `abap2UI5 - Nested View - Three Columns with FlexibleColumnLayout`
                    )->a( n = `showNavButton`  b = client->check_app_prev_stack( )
                    )->a( n = `navButtonPress` v = client->_event_nav_app_leave( )
                    )->a( n = `showHeader`     b = xsdbool( client->get( )-check_launchpad_active = abap_false ) ).

    page->tag( `MessageStrip`
        )->a( n = `text`     v = `A three-column FlexibleColumnLayout: select a row to open the detail column, then ` &&
                   `navigate on to open a third, deeply nested column.`
        )->a( n = `type`     v = `Information`
        )->a( n = `showIcon` b = abap_true
        )->a( n = `class`    v = `sapUiSmallMargin` ).

    DATA(col_layout) = page->ele( n = `FlexibleColumnLayout` ns = `f`
        )->a( n = `layout` v = client->_bind( mv_layout )
        )->a( n = `id`     v = `test` ).

    DATA(lr_master) = col_layout->ele( n = `beginColumnPages` ns = `f` ).

    DATA(lr_list) = lr_master->ele( `List`
        )->a( n = `headerText`      v = `List Output`
        )->a( n = `items`           v = client->_bind( val = t_tab )
        )->a( n = `mode`            v = `SingleSelectMaster`
        )->a( n = `selectionChange` v = client->_event( `SELCHANGE` )
        )->tag( `StandardListItem`
            )->a( n = `title`       v = `{TITLE}`
            )->a( n = `description` v = `{DESCR}`
            )->a( n = `icon`        v = `{ICON}`
            )->a( n = `info`        v = `{INFO}`
            )->a( n = `selected`    v = `{SELECTED}` ).

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

  ENDMETHOD.


  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).

      t_tab = VALUE #(
        ( title = `row_01`  info = `completed`   descr = `this is a description` icon = `sap-icon://account` )
        ( title = `row_02`  info = `incompleted` descr = `this is a description` icon = `sap-icon://account` )
        ( title = `row_03`  info = `working`     descr = `this is a description` icon = `sap-icon://account` )
        ( title = `row_04`  info = `working`     descr = `this is a description` icon = `sap-icon://account` )
        ( title = `row_05`  info = `completed`   descr = `this is a description` icon = `sap-icon://account` )
        ( title = `row_06`  info = `completed`   descr = `this is a description` icon = `sap-icon://account` ) ).

      mv_layout = `OneColumn`.
      view_display_master( ).
      view_display_detail( ).

    ELSEIF client->check_on_navigated( ).

      " every column that was open again: the nested views live inside the
      " master, so a re-displayed master alone would leave them empty
      view_display_master( ).
      view_display_detail( ).

      IF mv_layout = `ThreeColumnsEndExpanded`.
        view_display_detail_detail( ).
      ENDIF.

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

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).
      WHEN `NN_VIEW`.
        client->message_box_display( `Event in nested nested view raised` ).
      WHEN `ROW_NAVIGATE`.

        " a row without a title has nothing to open - the third column stays
        " closed instead of being filled behind a two-column layout
        IF client->get_event_arg( ) IS NOT INITIAL.
          mv_layout = `ThreeColumnsEndExpanded`.
          mv_title  = client->get_event_arg( ).
          view_display_detail_detail( ).
        ENDIF.

      WHEN `SELCHANGE`.
        DATA(lt_sel) = t_tab.
        DELETE lt_sel WHERE selected = abap_false.
        READ TABLE lt_sel INTO DATA(ls_sel) INDEX 1.

        IF sy-subrc = 0 AND NOT line_exists( t_tab2[ title = ls_sel-title ] ).
          INSERT ls_sel INTO TABLE t_tab2.
        ENDIF.
        mv_layout = `TwoColumnsMidExpanded`.
        view_display_detail( ).
    ENDCASE.

  ENDMETHOD.

ENDCLASS.