Nav Container
The Nav Container stacks multiple pages and offers an API to switch between them with some animation. Typically application developers would use the App control which inherits from NavContainer.
Z2UI5_CL_SMPC_APP_242
Controls
sap.m
UI5 1.111
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_242- Source file
z2ui5_cl_smpc_app_242.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.NavContainer- Demo kit sample
sap.m.sample.NavContainer- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.111
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: navcontainer, nav, container, sap.m, html, vbox, overflowtoolbar, button, hbox, flexitemdata, customdata, select
Controls it builds
- sap.m.Button
- sap.m.FlexItemData
- sap.m.HBox
- sap.m.NavContainer
- sap.m.OverflowToolbar
- sap.m.Page
- sap.m.Select
- sap.m.VBox
- sap.ui.core.CustomData
- sap.ui.core.HTML
- sap.ui.core.Item
- sap.ui.core.mvc.View
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_242.clas.abap — 256 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords navcontainer nav container sap.m html vbox overflowtoolbar button hbox flexitemdata customdata select
" @summary The Nav Container stacks multiple pages and offers an API to switch between them with some animation. Typically application developers would use the App control which inherits from NavContainer.
CLASS z2ui5_cl_smpc_app_242 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
" the animation Select's selectedKey is two-way bound so the backend knows
" which transition to hand navCon.to(); seeded to the first item's key
DATA animation TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_242 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
animation = `slide`.
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 = `xmlns` v = `sap.m`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
" the sample's style.css (border around the NavContainer), injected via a
" core:HTML content attribute (see CAPABILITIES.md); braces escaped \{ \}
)->tag( n = `HTML` ns = `core`
)->a( n = `content` v = `<style>.navContainerControl\{border-color:#888;border-style:solid;border-width:0.0625em;\}</style>`
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `NavContainer`
)->a( n = `id` v = `navCon`
)->a( n = `width` v = `98%`
)->a( n = `height` v = `16em`
)->a( n = `class` v = `navContainerControl sapUiSmallMarginBottom`
" onNavigationFinished: MessageToast.show("Navigation to page '" + to.getTitle() + "' finished")
" - client-composed toast, the {0} placeholder filled by the resolved page title
)->a( n = `navigationFinished` v = client->follow_up_action( val = client->cs_event-control_global
t_arg = VALUE #( ( `MESSAGE_TOAST` )
( `show` )
( `Navigation to page '{0}' finished` )
( `${$parameters>/to}.getTitle()` ) ) )
)->ele( `Page`
)->a( n = `id` v = `p1`
)->a( n = `title` v = `Page 1`
)->ele( `footer`
)->ele( `OverflowToolbar`
)->tag( `Button`
)->a( n = `text` v = `Action 1`
)->end(
)->end(
)->end(
)->ele( `Page`
)->a( n = `id` v = `p2`
)->a( n = `title` v = `Page 2`
)->ele( `footer`
)->ele( `OverflowToolbar`
)->tag( `Button`
)->a( n = `text` v = `Action 2`
)->end(
)->end(
)->end(
)->ele( `Page`
)->a( n = `id` v = `p3`
)->a( n = `title` v = `Page 3`
)->ele( `footer`
)->ele( `OverflowToolbar`
)->tag( `Button`
)->a( n = `text` v = `Action 3`
)->end(
)->end(
)->end(
)->ele( `Page`
)->a( n = `id` v = `p4`
)->a( n = `title` v = `Page 4`
)->ele( `footer`
)->ele( `OverflowToolbar`
)->tag( `Button`
)->a( n = `text` v = `Action 4`
)->end(
)->end(
)->end(
)->end(
)->ele( `HBox`
)->ele( `Button`
)->a( n = `text` v = `To 1`
)->a( n = `press` v = client->_event( val = `NAV` arg = `p1` )
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->ele( `customData`
)->tag( n = `CustomData` ns = `core`
)->a( n = `key` v = `target`
)->a( n = `value` v = `p1`
)->end(
)->end(
)->ele( `Button`
)->a( n = `text` v = `To 2`
)->a( n = `press` v = client->_event( val = `NAV` arg = `p2` )
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->ele( `customData`
)->tag( n = `CustomData` ns = `core`
)->a( n = `key` v = `target`
)->a( n = `value` v = `p2`
)->end(
)->end(
)->ele( `Button`
)->a( n = `text` v = `To 3`
)->a( n = `press` v = client->_event( val = `NAV` arg = `p3` )
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->ele( `customData`
)->tag( n = `CustomData` ns = `core`
)->a( n = `key` v = `target`
)->a( n = `value` v = `p3`
)->end(
)->end(
)->ele( `Button`
)->a( n = `text` v = `To 4`
)->a( n = `press` v = client->_event( val = `NAV` arg = `p4` )
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->ele( `customData`
)->tag( n = `CustomData` ns = `core`
)->a( n = `key` v = `target`
)->a( n = `value` v = `p4`
)->end(
)->end(
)->end(
)->ele( `HBox`
)->ele( `Button`
)->a( n = `text` v = `Back`
)->a( n = `type` v = `Back`
)->a( n = `press` v = client->_event( `NAV_BACK` )
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->end(
)->ele( `Select`
)->a( n = `id` v = `animationSelect`
)->a( n = `selectedKey` v = client->_bind( animation )
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Slide animation`
)->a( n = `key` v = `slide`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Base slide animation`
)->a( n = `key` v = `baseSlide`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Fade animation`
)->a( n = `key` v = `fade`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Flip animation`
)->a( n = `key` v = `flip`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Show animation`
)->a( n = `key` v = `show`
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->end(
)->end(
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `NAV`.
" handleNav (with a target): navCon.to( byId(target), animationSelect.getSelectedKey() )
" - the target page id rides the button's event arg, the transition is the
" two-way bound Select value applied before this handler runs
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `navCon` ) ( `to` ) ( client->get_event_arg( ) ) ( animation ) ) ).
WHEN `NAV_BACK`.
" handleNav (no target): navCon.back()
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `navCon` ) ( `back` ) ) ).
ENDCASE.
ENDMETHOD.
ENDCLASS.More in sap.m
- Table - Strict layout — This example demonstrates the Strict layout and the column resizing of the table.
- Popover — The Popover controls allows to show contextual information without leaving the current pa…
- InitialPage Pattern — The initial page floorplan allows the user to navigate to a single object to view or edit…
- Facet Filter - Simple — With the Facet Filter you can offer multiple filters ('facets') to assist the user in nar…
- Feed Input — This sample shows a standalone feed input with different settings.
- Object Marker in a table — The ObjectMarker is a small building block representing an object by an icon or text and…
- Responsive Popover — The Responsive Popover is an abstraction of Popover and Dialog. On the phone a Dialog wil…
- Button with Badge — Button with a Badge attached
- Color Palette as popover — The ColorPalette in a popover (by use of thin wrapper control sap.m.ColorPalettePopover).
- Busy Dialog - Light — This is a 'light' version of the standard Busy Dialog; it also blocks the user interface…
- Carousel with Multiple Items at Once — The customLayout aggregation determines how many pages are displayed in Carousel's visibl…
- Date Picker - Value States — This example shows different DatePicker value states.
On this page