Updated 8 May 2023: latest changes

Do you have lot of pages in your MDK app and want to see their contents by just navigating across tabs? You can use Tab controls (Bottom Navigation & Tabs) to optimize your app pages to collect more data and to offer more value to your end users.

Bottom Navigation

Bottom Navigation control allows you to have list of tab items (maximum 5 tab items) on a page (of type: BottomNavigation) where each tab item is bound to a related page.

You can navigate across tabs to see the page content. Tabs in such pages don’t have common context (or disconnected from each other).

Bottom Navigation control in MDK mobile client

Bottom Navigation control in MDK web application

In order to use Bottom Navigation control in your MDK app, you need to create a new page of Type as Bottom Navigation.

This page adds one TabItem by default, you can then bind it’s properties and also add more items if needed.

E.g., I have added 5 tab items in a BottomNavigation page, I can now set caption, icon and PageToOpen properties for individual tab items.

Below is metadata example of Customers TabItem.

 "Items": [
             {
              "Caption": "Customers",
               "Image": "sap-icon://customer",
               "PageToOpen": "/TabsControl/Pages/Customers/Customers_List.page",
               "_Name": "TabItem1",
               "_Type": "Control.Type.TabItem"
              },
           .......
           .......
           .......
          ]

It is important to understand that the bottom navigation is designed to be a global navigation and that each tab has it’s own navigation stack. As you open additional pages within one of the tabs and then switch to another tab when you come back to the first tab you will (by default) be exactly where you left off.

You can set the ResetIfPressedWhenActive to true if you want the tab to always start at the top level when the tab is selected

"ResetIfPressedWhenActive": true,

Tabs

Tabs control allows you to have list of tab items (no limit) on a page (of type: Tabs) where each tab item is bound to a related page.  You can use Tabs control to navigate between pages that are related and share same level of hierarchy.

Tabs pages also support displaying the header above the tabs so you can have a persistent header (Object, KPI, Profile)

Tabs Control in MDK mobile client

Tabs Control in MDK web application

In order to use Tabs control in your MDK app, you need to create a new page of Type as Tabs.

This page adds one TabItem by default, you can then bind it’s properties and also add more items if needed.

E.g., I have added 2 tab items in a Tabs page, I can now set caption, image and PageToOpen properties for individual tab items. And also have added ObjectHeader above the tabs.

Below is metadata example of  Details Tab metadata.

"Items": [
           {
             "Caption": "Details",
             "Image": "sap-icon://detail-view",
             "PageToOpen": "/TabsControl/Pages/Customers/Customers_Detail.page",
             "_Name": "TabItem1",
             "_Type": "Control.Type.TabItem"
           },
           .......
           .......
           .......
        ]

Unlike bottom navigation, Tabs are sub-sections of a detail page.  Any navigation actions will open at the outer page level rather than within the current tab.  When a tab page is open, you can either click on the different tabs to switch between the pages or swipe left or right to cycle between the tabs.

References:

• Bottom Navigation & Tab controls documentation
• Create your Mobile Development Kit (MDK) app in SAP Business Application Studio
• Migrating Your Mobile Development Kit (MDK) Apps from SAP Web IDE to SAP Business Application Studio
• MDK documentation:
  • Guides
  • API references

New to MDK development?

Follow these tutorials to learn more about Mobile development kit

I am looking forward to your feedback and comments.

Jitendra