Slideout
Last updated
Last updated
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.
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
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.
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'
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.
blurredBackground
boolean
Current boolean value of the "Blurred background" property.
close()
() => void
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
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.
CSS width of the slideout. See considerations .
Closes the slideout and executes the "On hide" action . Noop in case the slideout is not open.
Opens the slideout and executes the "On show" action . Closes any other slideout that is currently open. Noop in case the slideout is already open.