Overview

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are items such as areas, static text labels and form fields which display data from a table. Layouts are items such as Tiles.

Screen Layers

A typical screen has a layered structure, in which the Layers are the parents for other layers. This structure, combined with appropriate styling, creates a responsive design that will adapt to both desktop and mobile devices. The nested structure for screens is illustrated below, click on the image to make it larger: 

Components

These are the most basic building blocks that are combined to design a screen.

Components are available from any palette, for example theme 2.1 they can be found under Basic Layouts. For every component you add, you need to give it a name and specify the formatting using the Component properties. It's a good idea to include a meaningful description too.

The basic components are:

Layouts

Layouts are groups of components that have been preconfigured. You can create these yourself by combining components or you can use the pre-built layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:

• Tile is the container, its styling makes the area look like a tile and controls the layout of its child objects.
• Header, an area which contains an icon and a static text.
• Body, a simple area that controls the layout of items places inside it, including the addition of spacing around its edge.
• Footer, area which houses a set of buttons used for updating content associated to the tile.

Finding Layouts and Components

It can be very useful to find a layout, component or the items which contains them. There are two ways to achieve this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, the repository can be manually searched, simply expand the  Components branch and navigate to the desired item. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Moving Layouts and Components

In the Layers Section

The layers section will automatically highlight your selected screen item making it easy to find:

1. Click and drag your item to change its position on the screen. 
2. To move a layout or component inside another item, hold Shift and drag it onto the desired container.

On Screen

Click and hold on a layout or component on your screen and then:

• Either drag it to the desired location and drop it. This creates a sibling relationship.
  For example, if you drop a field on top of another field they appear next to each other.
• Or hold Shift and drag the component to the desired location. This will drop it inside the other component. This creates a parent child relationship.

In the Repository

1. Click and drag a layout or components in the  Components section of the repository to change their position on the screen.
2. To move a layout or component into a new container, hold Shift and drag it to the new container. Commonly this is used to move one item inside another item.