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