Drawer

A Drawer is a customizable view, often used to provide a navigational menu. Drawers can be anchored to any side of the screen and can be permanently visible or controlled using the Toggle drawer action node.

The Drawer is often used to represent menus, details pane (for viewing or editing information of a single object), search panes or help menus. For example, when toggling a menu icon on a responsive App, you may open a Drawer from the left og right side. Or clicking the Edit icon on a Table may open a Drawer from the right. A persistent Drawer may represent global headers (with menu) for your App.

Example

A Drawer example is available in our Showroom. You can view the demo, as well as access the setup in Appfarm Create. Don't have access? Register.

Main app drawer

It is possible to configure a Main App Drawer in App settings. This is optional, but defining a main app drawer enables some additional built-in features:

• The drawer state is accessible via the built-in app variable Is Main Drawer Open.

• If the drawer's Type property is Temporary, the drawer will be automatically closed when navigating using action nodes such as Navigate and Open dialog.

General properties

Property	Description
Type	The display behavior of the drawer. The options are: Persistent: Always visible. Temporary: Display as a modal window. The rest of the app is covered by a backdrop and interactions outside of the dialog are blocked. The drawer can be closed by clicking the backdrop, swiping on touch devices, or via the Toggle drawer action node. Responsive: Adapt according to the client screen size. Persistent will be applied by Large and Medium devices, while Temporary will be applied on Small and Extra Small devices.
Position	The anchor position of the drawer. If Type is Temporary, the drawer will animate into view. The options are: Left Right Top Bottom
Custom Width/Height	Enable width or height properties (depending on Position) in the Style properties to customize the size of the drawer. Default sizing will no longer apply.

Good to know

Drawers with Type Temporary and Position Left or Right position have a default width of 256 pixels or 100% - 56 px on Extra Small devices.

App bar

App bar properties for dialogs are the same as for views.

Event handlers

Property	Description
On Drawer Open	Triggered once the drawer has been opened and is visible.
On Backdrop Click	Available when Type is Temporary or Responsive Triggered when the user clicks on the backdrop outside of the drawer. This will also be triggered when the user presses the Esc key on their keyboard. This action will not be triggered if Type is Responsive and the device size is Large or Medium.