Skip to content

SideDrawer

A global navigation menu which allows for lateral navigation across various pages in the app. Only one page can contain this control and this page can be added as the 'MainPage' in Application.app file to enable the side drawer. The first item in the first section of this control will define the landing page of the application.

SideDrawer Properties

Property Type Required Default
AlwaysShowDrawerButton boolean Optional false
ClearHistory boolean Optional false
DataSubscriptions DataSubscriptions Optional
DrawerButton Image Optional
Header object Optional
Sections SideDrawerSection Required
Styles NavigationDrawerStyle Optional
_Name string Optional
_Type const Required

AlwaysShowDrawerButton

A flag to indicate if the side drawer button will be shown on every page. If the flag is enabled then in iOS the back navigation button will be shown after the side drawer button, and in Android the back navigation button will not be shown and the system back button has to be used for navigating back.

  • type: boolean
  • default: false

ClearHistory

A flag to indicate if the history of navigation within a page should be cleared when another destination on the side drawer is selected.

  • type: boolean
  • default: false

DataSubscriptions

Array of data change events to subscribe to.


DrawerButton

The image to be shown for side drawer button on action bar. If not provided, hamburger icon will be showed.


  • type: object with following properties.
Property Type Required Default
Headline string Optional
SubHeadline string Optional
Icon Image Optional
Alignment string Optional center(iOS), left(Android)
IconIsCircular boolean Optional
DisableIconText boolean Optional
OnPress ActionOrRule Optional
Target Target Optional

Headline

A headline label in the header view.

SubHeadline

A sub-headline label in the header view.

Icon

Image to be displayed in the header view.

Alignment

Choose one of the options based on how you want to align the header content.

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

Value
left
right
center

IconIsCircular

If the value is True, the icon is displayed in a circular shape.

DisableIconText

A flag to indicate if the text-based avatar image should be displayed in the absence of icon. Avatar image displays characters of headline.

OnPress

Action/Rule to be triggered when the header is pressed.

Target

Only the first record of any entity set returned by the target will be used.


Sections

Navigation items are logically grouped into sections. Each section contains a list of grouped pages.

  • type: SideDrawerSection[]

All array items must be of the type: SideDrawerSection


Styles


_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.SideDrawer"

SideDrawer item without PageToOpen property

You may define a SideDrawer item without the property PageToOpen. In the case you'd like to set an action or rule to OnPress property. The action or the rule will be executed with the SiderDrawer control context.

If there are navigation actions in the rule, the first non-modal page in the navigation actions will be displayed, as if the page is defined in PageToOpen, so you can do some tasks before showing the page.

If both PageToOpen and OnPress properties are not defined in an item, clicking the item it will do nothing.


Examples

{
  "_Type": "Page",
  "Controls": [
    {
      "_Type": "Control.Type.SideDrawer",
      "ClearHistory": false,
      "Header": {
        "Icon": "https://www.gstatic.com/webp/gallery/2.jpg",
        "IconIsCircular": true,
        "Headline": "{OrderId}",
        "SubHeadline": "{OrderDescription}",
        "Target": {
          "EntitySet": "MyWorkOrderHeaders",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$top=1"
        }
      },
      "Sections": [
        {
          "Caption": "Main Section",
          "Items": [
            {
              "Title": "MDK Components",
              "Image": "res://map_icon",
              "OnPress": "/MDKDevApp/Actions/Banner/BannerMessage.action",
              "PageToOpen": "/MDKDevApp/Pages/Examples/FeatureCategory.page",
              "ResetIfPressedWhenActive": true,
              "_Name": "FeatureCategory"
            },
            {
              "Title": "Work Orders",
              "Image": "res://map_icon",
              "OnPress": "/MDKDevApp/Actions/Popover/Popover.action",
              "PageToOpen": "/MDKDevApp/Pages/OData/WorkOrder/WorkOrderList.page",
              "ResetIfPressedWhenActive": true,
              "_Name": "WorkOrderList"
            },
            {
              "Title" : "Fiori Controls",
              "Image" : "res://map_icon",
              "OnPress" : "/MDKDevApp/Rules/Navigation/NavToControlExamples.js",
              "_Name": "ControlExamples"
            }
          ]
        },
        {
          "Caption": "Controls",
          "Items": [
            {
              "Title": "Formcell",
              "Image": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
              "OnPress": "/MDKDevApp/Actions/Message/ShowMessage.action",
              "PageToOpen": "/MDKDevApp/Pages/FormCellExamples.page",
              "_Name": "FormCellExamples"
            },
            {
              "Title": "SectionTable",
              "Image": "https://www.gstatic.com/webp/gallery/1.sm.jpg",
              "OnPress": "/MDKDevApp/Actions/Message/ShowMessage.action",
              "PageToOpen": "/MDKDevApp/Pages/SectionTableExamples.page",
              "_Name": "SectionTableExamples"
            }
          ]
        },
        {
          "PreserveImageSpacing": false,
          "Items": [
            {
              "_Name": "ODataItem",
              "Title": "OData Examples",
              "PageToOpen": "/MDKDevApp/Pages/Examples/ODataExamples.page"
            },
            {
              "_Name": "StylingItem",
              "Title": "Styling",
              "PageToOpen": "/MDKDevApp/Pages/Examples/StyleExamples.page"
            }
          ]
        }
      ],
      "Styles": {
        "DrawerBackground": "SideDrawerBackground",
        "HeaderBackground": "SideDrawerHeaderBackground",
        "HeaderIcon": "SideDrawerHeaderIcon",
        "HeaderHeadline": "SideDrawerHeadline",
        "HeaderSubHeadline": "SideDrawerSubHeadline",
        "HeaderSeparator": "SideDrawerHeaderSeparator",
        "SectionCaption": "SideDrawerSectionCaption",
        "SectionSeparator": "SideDrawerSectionSeparator",
        "SectionItemActive": "SideDrawerItemActive",
        "SectionItemOnPress": "SideDrawerItemOnPress",
        "SectionItemInactive": "SideDrawerItemInactive"
      }
    }
  ]
}
// Without header icon and with iconText

{
  "_Type": "Page",
  "Controls": [
    {
      "_Type": "Control.Type.SideDrawer",
      "ClearHistory": false,
      "Header": {
        "IconIsCircular": true,
        "Headline": "{OrderId}",
        "SubHeadline": "{OrderDescription}",
        "Target": {
          "EntitySet": "MyWorkOrderHeaders",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$top=1"
        }
      },
      "Sections": [
        {
          "Caption": "Main Section",
          "Items": [
            {
              "Title": "MDK Components",
              "Image": "res://map_icon",
              "OnPress": "/MDKDevApp/Actions/Banner/BannerMessage.action",
              "PageToOpen": "/MDKDevApp/Pages/Examples/FeatureCategory.page",
              "ResetIfPressedWhenActive": true,
              "_Name": "FeatureCategory"
            },
            {
              "Title": "Work Orders",
              "Image": "res://map_icon",
              "OnPress": "/MDKDevApp/Actions/Popover/Popover.action",
              "PageToOpen": "/MDKDevApp/Pages/OData/WorkOrder/WorkOrderList.page",
              "ResetIfPressedWhenActive": true,
              "_Name": "WorkOrderList"
            }
          ]
        }
      ],
      "Styles": {
        "HeaderIcon": "SideDrawerHeaderIcon"
      }
    }
  ]
}
// Items defined from rule

{
  "_Type": "Page",
  "Controls": [
    {
      "_Type": "Control.Type.SideDrawer",
      "ClearHistory": false,
      "Header": {
        "IconIsCircular": true,
        "Headline": "Headline",
        "SubHeadline": "SubHeadline"
      },
      "Sections": [
        {
          "Caption": "Main Section",
          "Items": "/MDKApp/Rules/GetMenuItems.js"
        }
      ]
    }
  ]
}

Style Classes Definition

.SideDrawerBackground {
  background-color: #232F34;
}
.SideDrawerHeaderBackground {
  background-color: orange;
}
.SideDrawerHeadline {
  color: white;
}
.SideDrawerSubHeadline {
  font-style: italic;
}
.SideDrawerHeaderSeparator {
  border-bottom-color: white;
  border-bottom-width: 2;
}
.SideDrawerSectionCaption {
  background-color: #192325;
  color: white;
}
.SideDrawerSectionSeparator {
  border-bottom-color: orange;
  border-bottom-width: 1;
}
.SideDrawerItemActive {
  background-color: brown;
}
.SideDrawerItemInactive {
  color: white;
}
.SideDrawerItemOnPress {
  background-color: #344955;
  color: white;
}
.SideDrawerHeaderIcon {
  font-size: 16;
  color: #FF0000;
  background-color: #000000;
}