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`	No	`false`
ClearHistory	`boolean`	No	`false`
DataSubscriptions	DataSubscriptions	No
DrawerButton	Image	No
Header	`object`	No
Sections	SideDrawerSection	Yes
Styles	NavigationDrawerStyle	No
_Name	`string`	No
_Type	`const`	Yes

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	No
`SubHeadline`	string	No
`Icon`	Image	No
`Alignment`	string	No	Center(iOS), Left(Android)
`IconIsCircular`	boolean	No
`DisableIconText`	boolean	No
`OnPress`	ActionOrRule	No
`Target`	Target	No

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 one of the known values listed 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:

"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;
}