Adding a Slide-Out Area

Owned by Anthony George
Last updated: Mar 03, 2023

This page is for application designers who want to create parts of a screen that open to show additional information.

Finding Slide-Outs

To add a slide-out or expanding area to your screen, drag onto the screen canvas one of the components available from the  Palette → Serene Grey → Tiles. There are two types:

  • Collapsible tile 
  • Sliding draw

Collapsible Tiles

This is a complete tile which expands either horizontally or vertically to display additional content

 The horizontal collapsible tile is designed to work where the tile container Flow is set to Row. The screenshot below shows the tile expanding to the left of the grid.


 The vertical collapsible tile is designed to work where the tile container Flow is set to Column. The screenshot below shows the tile expanding below the grid.

Sliding Draw Tiles

  A sliding draw tile has a hidden area that  expands to display additional content. There are four tiles, which slide out in different directions. The following screenshot shows the draw sliding out on the right of the grid.


Adding Components to a Slide-Out

To add components to the hidden area using the  Layers panel:

  1. In the screen, select the slide-out tile.
  2. Click  Show/Hide Layer Panel to display the layouts panel, which should have the tile parent component selected.
  3. Use the list to find the hidden area in the tile.
  4. Drag components from elsewhere in the layers panel list into the hidden area.

To add components to the hidden area on the screen canvas:

  1. Lock the screen.
  2. Click the chevron to expand the slide-out area.
  3. Unlock the screen
  4. You can now drag components into the slide-out area.

If you need to move items after you have added them, see Moving Components on a Screen.

Resizing Slide-Outs

The collapsible tile expands to 350px. To change the expanded size of a collapsible tile that you have added to the screen canvas:

  1. Click on the tile to open its properties. 
  2. Click the   Style tab.
  3. In the CSS Properties section, double-click the style minWidth or minHeight (depending on the tile) and change 350px to the size you require.
  4. Click  OK to save your changes.
  5. Either  Refresh or  close and reopen the screen to see the change.

To change the size of a sliding draw tile:

  1. Unlock the screen
  2. Drag the dividing line between the sliding draw and the main area to the size you require.
  3. Lock the screen and test the proportions of the tile.