Skip to Content
Technical Articles
Author's profile photo Jitendra Kansal

Optimize Your MDK App with Tab Controls

Updated 29 October 2020: Some of the screenshots changed due to enhancements in Tabs page.

 

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

 

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)

 

 

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:

 

New to MDK development?

Follow these tutorials to learn more about Mobile development kit

I am looking forward to your feedback and comments.

Jitendra

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Matt Moyse
      Matt Moyse

      Hi Jitendra, great blog!

      Do you know when the 'Tabs page' will become available on the MDK Web Client?

      Matt

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Matt Moyse

      Tabs page support in MDK Web runtime is now available in latest MDK client 5.1 release.

      Author's profile photo Matt Moyse
      Matt Moyse

      Ah perfect thanks! 🙂