The Slideout component, also known as sliding panel or drawer, allows you to provide additional information or options for a record or specific context. It slides in and out of the view horizontally and covers a fraction of the main UI. Similar to the Modal, Container and Form it is a host. I.e. it operates as a canvas for all other components with its own grid system, such that you can customize the UI of the slideout to your needs by dragging and dropping components in it.

Accessing a slideout

Since the Slideout is usually not visible on the canvas, you might wonder how to access a closed slideout in the app editor. You can use the explorer tab of the left-hand pane to open any slideout component with a click.

It is not possible to drag another component from outside a slideout into a slideout. Until this issue is resolved, we recommend using copy-paste to achieve this result: 1. Select the component(s) that you would like to move to a slideout 2. Use CMD+c (Mac) / CTRL+c (Win) to copy the selected component(s) 3. Open the target slideout via the explorer tab and make sure it is selected 4. Use CMD+v (Mac) / CTRL+v (Win) to paste the copied component(s) into the slideout 5. Delete the copied component(s) outside the slideout

Slideout sizing

Instead of resizing a Slideout in the usual way with drag-and-drop, the Slideout dimension is determined by its "Width" property. You can place any valid CSS expression, for example, 80%, 500px, 80vh or even calc(100% - 50px), and these dimensions are applied to the Slideout.

The Slideout has a minimum height of 280px and minimum width of 360px to maintain basic usability that cannot be changed.

We recommend using relative sizing as much as possible. Absolute dimensions in pixels might lead to undesired overflow on small screens, or weirdly small slideout on large screens.


The Slideout component offers the following configuration properties.

PropertyTypeDefault valueBehavior

Blurred background



Determines whether a dark blurred background should cover the UI.

Close on escape



When set to true, an open slideout closes when the user hits the escape key. Otherwise, this keypress is ignored.

Close on outside click



When set to true, an open slideout closes when the user clicks outside its content, i.e. on the blurred background. It is recommended to disable this for complex slideouts, of which the user would not like to lose state easily.

Header text



The text to be displayed in the header. Only available when the "Show header" property is set to true.


'left' | 'right'


Defines the position of the slideout on the screen.




Determines whether the slideout content is scrollable or not. When set to false, overflowing content is not be accessible for the end user.

Show close icon



Determines whether there should be the "x" icon in the top-right corner for closing the slideout. In case "Show header" is set to false, the icon might overlap with the slideout content.

Show header



Determines whether the slideout should have a header. When set to true, the header text can be configured via the "Header text" property.




The "Visible" property behaves differently than in other components. For the Slideout, this property determines whether the slideout is open or closed. You might apply a dynamic JavaScript expression here, but usually a slideout should be opened or closed explicitly using the exposed functions.




CSS width of the slideout. See considerations above.

Review the notes regarding the "Scrollable" property in the Container reference, the Slideout behaves in exactly the same way.

An open slideout is closed automatically when another slideout or modal is opened. This means, that you do not need to close a slideout explicitly when opening another slideout or a modal.


The Slidout offers two events to associate actions with:

  • On show: This action is executed whenever the slideout is opened, regardless of the reason ("Visible" property, show() function, selecting the component in the explorer tab of the app editor).

  • On hide: This action is executed when a slideout is closed, regardless of the reason.

To maintain a pleasant user experience, the "On show" action is executed asynchronously with displaying the slideout. A long-running action does not block the slideout render, but leads to a spinner until the action run has finished. This is useful, for example, fetching data from sources when a slideout is opened.

The "On hide" action is executed asynchronously as well, i.e. the slideout will be closed instantly, but the action might still be running. Again, this leads to a more snappy UI and better user experience. There is currently no way to modify this action execution behavior.


The Slideout exposes the following API in the JavaScript runtime environment.

Property / FunctionTypeBehavior



Current boolean value of the "Blurred background" property.


() => void

Closes the slideout and executes the "On hide" action asynchronously. Noop in case the slideout is not open.



Current boolean value of the "Close on escape" property.



Current boolean value of the "Close on outside click" property.



Current string value of the "Header text" configuration.


() => void

Alias for close().


() => void

Alias for show().


(value: boolean) => void

Sets the "Blurred background" property to the provided boolean value.


(value: boolean) => void

Sets the "Close on escape" property to the provided boolean value.


(value: boolean) => void

Sets the "Close on outside click" property to the provided boolean value.


(value: string) => void

Sets the header text to the provided string value.


(value: boolean) => void

Defines if the close icon should be displayed or not.


(value: boolean) => void

Adjusts the flag whether the header text should be displayed to the provided boolean value.


(value: number) => void

Sets the "Width" property to the provided string value. The value should be a valid CSS expression. This is not validated.


() => void

Opens the slideout and executes the "On show" action asynchronously. Closes any other slideout that is currently open. Noop in case the slideout is already open.



Current boolean value fo the "Show close icon" property.



Current boolean value of the "Show header" configuration.



Current css-string value of the "Width" property.

Last updated