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 TilesMulti-component layouts can be simple, such as a label and a field, or more complex parts of a screen with responsive design, these are called tiles. Layouts can also be full screens.

Screen Layers

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

Components

These Components 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 example, the Serene Grey palette has the Basic Layouts section which contains components, such as an area. 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 preconfigured 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 an area container with styling to control its size and the layout of its child objectscomponents.
  • Header
  ,
  •  is an area which contains:
    • an
  icon and
  • • icon 
    • a static text
  .
  • • field for the header
  • Body is an area which contains: (in the illustration,
  a simple area that controls the layout of items places inside it, including the addition of
  • the body area is empty)
    • data components, such as a grid displaying table data or form fields
    • styling to control its size and the layout of its child components. It also has spacing around its edge.
  • Footer
  ,
  •  is an area which
  houses
  • contains:
    • a set of buttons
  used for updating content associated to the tile.
  • • , which the application user will use to make changes to the data that appears in the body

Finding Layouts and Components

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

It can be very useful to find a layout, component or the items which contains themcontainer. There are two ways to achieve do 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 Layer pane to highlight it on the canvas.

If the layer section is not visible, click 

Using Find in Repository

Right-click any item on an unlocked screen and select

Image RemovedImage Added

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

Moving Components