Tabs¶

This control renders a list of tab items along with content for each tab.

The control will always render as a full screen control taking over the entire space of the page.

Tabs is mainly used for organizing or allow navigation between group of content that are related and at the same level of hierarchy. Each tab page should contain content that is distinct from other tab pages in a set. Tabs is used to create sort of pager to browse between items that have the same context.

Tabs can support unlimited tab items. Tabs supports positioning of the tab bar (Top/Bottom), and Swipe gesture to switch between tab pages.

The tab pages of the Tabs would preserve its last state once the tab page is loaded, so that when user switch to another tab item and switch back to the previous tab item, they return to the last screen viewed.

Tabs does not support inner navigation (navigation on tab page level), any navigation action triggered from the tab page content would result in a navigation on the parent page level or similar to outer navigation on BottomNavigation.

Parent Page with Tabs may have Toolbar control defined on the same page. Tabs has nested Tabs support. It is not recommended to display BottomNavigation as nested control of Tabs.

Tabs Properties¶

Property	Type	Required
Items	complex	Optional
Position	`enum`	Optional
PreloadTabs	`number[]`	Optional
Styles	`object`	Optional
_Name	`string`	Optional
_Type	`const`	Required

Items¶

type: complex

Items Value¶

Any following options needs to be fulfilled.

Option 1¶

List of tab items defined for the tab control.

Array type:

All items must be of the type:

TabItem

Option 2¶

Return result in TabItemArray format. Rule will not be triggered again when Tabs redraw.

Rule

Position¶

type: enum

The value of this property must be equal to one of the known values below.

Position Known Values¶

Value	Description
`Top`
`Bottom`

PreloadTabs¶

Array of tab indices which needs to be preloaded. Tab indexes starts from 0. Specifying [-1] will preload all the tabs. User can also use a rule to specify tabs that needs to be preloaded.

type: number[]

All items must be of the type: number

Styles¶

Set styles for TabStrp.

type: object with following properties.

Property	Type	Required	Default
TabStrip	`string`	Optional
TabItemImage	`string`	Optional

TabStrip¶

The string value is a style class name for TabStrip.TabStrip style has specific CSS properties such as selected-item-color (for active tab item), un-selected-item-color (for inactive tab items) and highlight-color (for highlight line of active tab item on Tabs only).

TabStrip style class

TabItemImage¶

The string value is a style class name for image in TabItem. It is applicable only to SAP icon or font icon types (Supported CSS property is font-size only).

Image style class

_Name¶

type: string

_Type¶

type: const

The value of this property must be equal to:

"Control.Type.Tabs"

Examples¶

{
  "_Type": "Page",
  "Controls": [{
    "Items": [{
      "_Name": "ActionsTab",
      "Caption": "Actions",
      "Image": "res://action_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ActionExamples.page",
      "_Type": "Control.Type.TabItem"
    },
    {
      "_Name": "RulesTab",
      "Caption": "Rules",
      "Image": "font://&#xe05a;",
      "OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action')",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/TabActionExamples.page",
      "_Type": "Control.Type.TabItem"
    },
    {
      "_Name": "ControlsTab",
      "Caption": "Controls",
      "Image": "res://control_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ControlExamples.page",
      "ResetIfPressedWhenActive": true,
      "_Type": "Control.Type.TabItem"
    },
    {
      "_Name":"ControlsTab",
      "Caption":"Controls",
      "Image":"res://control_icon",
      "OnPress":"/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen":"/MDKDevApp/Pages/Examples/ControlExamples.page",
      "PageMetadata":{
        "_Type":"Page",
        "_Name":"PageMetadataObjectTest1",
        "Controls":[{
            "Sections":[{
              "ObjectCells":[{
                "ObjectCell":{
                  "AccessoryType":"disclosureIndicator",
                  "Description":"another pagemetadata",
                  "OnPress":"/MDKDevApp/Actions/Navigation/PageMetadataObject.action",
                  "Title":"Next Page"
                }
              }],
              "_Name":"NavigationActionSection1",
              "_Type":"Section.Type.ObjectTable"
            }],
            "_Type":"Control.Type.SectionedTable",
            "_Name":"NavigationActionSectionTable1"
        }]
      },
      "_Type":"Control.Type.TabItem"
    }],
    "Position": "/MDKDevApp/Rules/AlwaysTop.js",
    "PreloadTabs": [2,4],
    "_Type": "Control.Type.Tabs",
    "_Name": "TabsControl"
  }]
}

Preload Tabs¶

if user wants to preload tabs in background, PreloadTabs property needs to be specified. by default we need to select a tab in order to load it.

"PreloadTabs": [-1]  // this will load all the tabs.
"PreloadTabs": [2,5] // this will load tabs based on indices.
"PreloadTabs": [-1,2,5] // all tabs will not be loaded only the selective ones will be loaded.
"PreloadTabs": [2,2,2] // Tab 2 will only be loaded once not thrice.

Tabs with font icon and style example¶

{
  "_Type": "Page",
  "_Name": "TabsStylesPage",
  "Caption": "Tabs Style Example",
  "Controls": [{
      "Items": [
        {
          "_Name": "ActionsTab",
          "Caption": "Actions",
          "Image": "sap-icon://settings",
          "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
          "PageToOpen" : "/MDKDevApp/Pages/Examples/TabActionExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlTab1",
          "Caption": "/MDKDevApp/Rules/ControlsCaption.js",
          "Image": "sap-icon://settings",
          "OnPress":"/MDKDevApp/Rules/TabControl/TabControlRule.js",
          "PageToOpen" : "/MDKDevApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlTab2",
          "Caption": "/MDKDevApp/Rules/ControlsCaption.js",
          "Image": "sap-icon://settings",
          "OnPress":"/MDKDevApp/Rules/TabControl/TabControlRule.js",
          "PageToOpen" : "/MDKDevApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        }
      ],
      "Styles": {
        "TabStrip": "TabStripStyle",
        "TabItemImage": "font-icon-class"
      },
      "_Type": "Control.Type.Tabs",
      "_Name": "TabsStyleTest"
    }]
}

Style Classes Definition¶

.TabStripStyle {
  background-color: #79d2a6;
  selected-item-color: red;
  un-selected-item-color: #cc6600;
  highlight-color: red;
}

/* Only font-size is supported */
.font-icon-class {
  font-size: 8;
}