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.

type: DataSubscriptions

DrawerButton¶

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

type: Image

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.

Image

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.

ActionOrRule
Formatter and Binding are not supported

Target¶

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

Target

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¶

type: NavigationDrawerStyle

_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"
        }
      ]
    }
  ]
}

// Side drawer with font icon and styles

{
  "_Type": "Page",
  "Controls": [
    {
      "_Type":"Control.Type.SideDrawer",
      "DrawerButton": "sap-icon://home",
      "Header": {
        "Icon": "sap-icon://settings",
        "IconIsCircular":true,
        "Headline": "Headline",
      },
      "Styles": {
        "HeaderIcon": "font-icon-class",
        "DrawerButton": "font-icon-class"
      },
      "Sections": [
        {
          "Caption": "caption",
          "Items": [ 
              {
                "Title": "title-1",
                "Image": "sap-icon://settings",
                "Styles": {
                  "SectionItemImage": "font-icon-class"
                }
              },
              {
                "Title": "title-2",
                "Image": "sap-icon://settings",
                "Styles": {
                  "SectionItemImage": "font-icon-class-2"
                }
              }
          ]
        }
      ]
    }
  ]
}

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;
}
.font-icon-class {
  font-size: 5;
  color: red;
}
.font-icon-class-2 {
  font-size: 5;
  color: green;
}