Slideout

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.

Placing a slideout in your app

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.

Accessing a closed slideout in the editor

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.

Properties

The Slideout component offers the following configuration properties.

Property	Type	Default value	Behavior
Blurred background	boolean	true	Determines whether a dark blurred background should cover the UI.
Close on escape	boolean	true	When set to true, an open slideout closes when the user hits the escape key. Otherwise, this keypress is ignored.
Close on outside click	boolean	true	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	stringWithJs	'Header'	The text to be displayed in the header. Only available when the "Show header" property is set to true.
Position	'left' | 'right'	'right'	Defines the position of the slideout on the screen.
Scrollable	boolean	true	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	boolean	true	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	boolean	true	Determines whether the slideout should have a header. When set to true, the header text can be configured via the "Header text" property.
Visible	boolean	false	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.
Width	string	'60vw'	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.

Events

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.

API

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

Property / Function	Type	Behavior
blurredBackground	boolean	Current boolean value of the "Blurred background" property.
close()	() => void	Closes the slideout and executes the "On hide" action asynchronously. Noop in case the slideout is not open.
closeOnEscape	boolean	Current boolean value of the "Close on escape" property.
closeOnOutsideClick	boolean	Current boolean value of the "Close on outside click" property.
headerText	string	Current string value of the "Header text" configuration.
hide()	() => void	Alias for close().
open()	() => void	Alias for show().
setBlurredBackground(value)	(value: boolean) => void	Sets the "Blurred background" property to the provided boolean value.
setCloseOnEscape(value)	(value: boolean) => void	Sets the "Close on escape" property to the provided boolean value.
setCloseOnOutsideClick(value)	(value: boolean) => void	Sets the "Close on outside click" property to the provided boolean value.
setHeaderText(value)	(value: string) => void	Sets the header text to the provided string value.
setShowCloseIcon(value)	(value: boolean) => void	Defines if the close icon should be displayed or not.
setShowHeader(value)	(value: boolean) => void	Adjusts the flag whether the header text should be displayed to the provided boolean value.
setWidth(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.
show()	() => 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.
showCloseIcon	boolean	Current boolean value fo the "Show close icon" property.
showHeader	boolean	Current boolean value of the "Show header" configuration.
width	string	Current css-string value of the "Width" property.