Sidebar


Purpose

You can use the Sidebar API on Android and iOS devices to control a natively animated menu. The API simulates two independent web views, while showing the web app and the menu in the same web view, document and JavaScript context.

The menu slides in from the left side of the screen when:

  • the show method is called from the web app

  • the user swipes from the left edge of the screen

On iOS, when the menu is open, rotating the device causes screen orientation change and results in the menu closing automatically. The user can then reopen the menu. On Android, when the menu is open, screen orientation change is disabled.

You can access the object by using the window.launchbox.SideBar reference.

Module

This object belongs to the Hybrid product module.

Properties

Properties of the SideBar object are listed below:

Name Description Type
presentsWithGesture

An attribute that controls whether the menu can be shown with a swipe gesture starting from the left edge of the screen. By default it is set to "false" (disabled).

boolean
onBeforeShow

An observable event delivered to the web app when the menu starts to appear on screen. The web app must react by showing the menu content, and when this happens, it must call the notifyCOntentReady method.

event
onAfterShow An observable event delivered to the web app when the menu has fully shown on the screen. event
onBeforeHide An observable event delivered to the web app when the menu starts to be dragged towards the edge of the screen. event
onAfterHide An observable event delivered to the web app when the menu has fully disappeared from the screen. The web app must react by hiding the menu content, and when this happens, it must call the notifyCOntentReady method. event

Methods

Name Return type Description
configure undefined

The configure method sets up all configuration options of the Sidebar API and enables the APIs use in Pega Mobile Client. Calling this method is requided for the Sidebar API to work.

show undefined

The show method triggers a non-interactive animation that results in displaying the sidebar.

hide undefined

The hide method triggers a non-interactive animation that results in hiding the sidebar.

notifyContentReady undefined

The web app uses the notifyContentReady method to notify the Sidebar API that it has displayed or hidden the menu content, as a reaction to onBeforeShow or onBeforeHide observable events.

API usage limitations

  1. After the menu is hidden, it may take the web app a while to render the content, so that the menu can be displayed again.

  2. Reconfiguring the menu while it is being presented on screen is not supported.

Related topic

Public API reference
Legal notice | Copyright © 2018 and Confidential to Pegasystems Inc. All rights reserved
PDN | Feedback
Advanced...