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.
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.
Properties
The Slideout
component offers the following configuration properties.
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.
Last updated