Skip to main content

Sheet (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

A Sheet is a panel that slides in over the page from the start edge, the end edge, or the bottom. It is lighter than a Modal. Use it for side content, such as filters, record details, or a settings drawer.

Widget type: WDS_SHEET_WIDGET

Open and close the Sheet​

The Sheet is hidden when the app loads. It does not take up space on the page.

  • To open it, call Sheet1.setVisibility(true), for example from a button's onClick event.
  • To close it from code, call Sheet1.setVisibility(false).
  • Users can close it with the close button in the header. They can also close it by clicking outside it or pressing Escape, when those options are on.

In the editor, select the Sheet or a widget inside it to open it, so you can add widgets to it.

Sheet body​

When you add a Sheet, Appsmith creates one Zone inside it. This Zone is the Sheet body. Drop your widgets into it. The body Zone has Visual separation off, so it blends into the Sheet.

If you delete the body Zone, the editor shows the message "This sheet's body was deleted. Undo to restore it." Use undo to bring it back.

Content properties​

These properties appear in the Content tab of the property pane.

General​

Animate loading boolean​

Shows a loading animation while the Sheet loads. On by default.

Position string​

Sets the edge the Sheet slides in from. Options:

  • Start
  • End (default)
  • Bottom

Size string​

Sets the size of the Sheet. For Start and End, this is the width. For Bottom, this is the height. Options:

  • Small
  • Medium (default)
  • Large

Header boolean​

Shows or hides the header. On by default.

Title string​

The title shown in the header. Default: Sheet title. You can bind this property, for example {{AnvilTable1.selectedRow.name}}.

This property shows only when Header is on.

Close button boolean​

Shows or hides the close button in the header. On by default.

This property shows only when Header is on.

Behavior​

Dismiss on outside click boolean​

Closes the Sheet when the user clicks the backdrop outside it. On by default.

Dismiss on escape boolean​

Closes the Sheet when the user presses the Escape key. On by default.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Sheet1.isOpen}}. You cannot set them directly.

isOpen boolean​

Is true when the Sheet is open.

Example:

{{Sheet1.isOpen}}

isVisible boolean​

Holds the same open state as isOpen. setVisibility() changes this value.

Example:

{{Sheet1.isVisible}}

title string​

The title shown in the header.

Example:

{{Sheet1.title}}

position string​

The edge the Sheet slides in from: start, end, or bottom.

Example:

{{Sheet1.position}}

size string​

The size of the Sheet: small, medium, or large.

Example:

{{Sheet1.size}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Opens the Sheet when you pass true. Closes it when you pass false.

Example:

Sheet1.setVisibility(true)

Events​

onOpen​

Runs when the Sheet opens in the deployed app. It does not run in the editor, for example when you select the Sheet to edit it.

onClose​

Runs when the Sheet closes. This includes the close button, the backdrop, and the Escape key.