Skip to Content
Technical Articles

Optimize Your MDK App with Tab Controls

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.

 

*********************************************************************************

Note: We will be introducing new configuration for the Tabs page type in our MDK 5.0 release that will allow for a persistent header (Object, KPI, Profile) above the tabs as shown in below screenshot.

 

*********************************************************************************

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.

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

 

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.