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.

The object can be accessed 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 Hybrid Container. 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

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.
Reconfiguring the menu while it is being presented on screen is not supported.

Sidebar

Sidebar

Purpose

Module

Properties

Methods

API usage limitations

Related topic