Overview

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 

Image Added

• Collapsible tile 
• Sliding draw

Collapsible Tiles

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

Image Added 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.

Image Added

Image Added 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.

Image Added

Sliding Draw Tiles

Image AddedImage AddedImage AddedImage Added  A sliding draw tile has a hidden area that  expands to display additional content.

These slide outs are available from your Palette, see Understanding Template Packages if you do not have these available. 

Setup

1. To use the slide outs simply drag them from the palette onto your your screen.
2. To add content to the areas which slide out:
   1. Use the Layer section and navigate to the hidden area Content can then be dragged onto the hidden area.
   2. Alternatively, lock your screen and expand the slide out area usin the chevron. Now unlock your screen and the previously hidden area is now displayed ready to accept content.

Resizing

Collapsible Tiles

The collapsible Tiles by default expand to 350px. This can be changed by:

There are four tiles, which slide out in different directions. The following screenshot shows the draw sliding out on the right of the grid.

Image Added

Adding Components to a Slide-Out

To add components to the hidden area using the 

1. In the screen, select the slide-out tile.
2. Click

   Insert excerpt
   _layer_slider _layer_slider nopanel true

    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 Propertiesproperties. 
2. Click the Styles tabthe 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

   .
3. In the CSS Properties section, double-click the style minWidth or minHeight (depending on your the tile:) and change 350px to the desired size you require.Save your changes. It may be necessary to
4. Click 

   Insert excerpt
   _finish _finish nopanel true

    to save your changes.
5. Either

   Insert excerpt
   _refresh _refresh nopanel true

    or  close and reopen the screen for the changes to take place

Sliding Draws

1. 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

1. to the

1. size you require.
2. Lock

1. the screen and test

Collapsible Tiles

Horizontal

Image Removed

Available from the Tiles section of your palette, these are designed to work where the tile container is set to row.

Image RemovedVertical

Image Removed

These are designed to work where the tile container is set to column.

Image Removed

Sliding Draw

Available from the Tiles section of your palette, there are sliding draws for all axis:

Image Removed

Image Removed

Image Removed

Image Removed

1. the proportions of the tile.