Overview

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are areas, static text labels and fields, which display data from a table. Multi-component layouts can be simple, such a 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 one layer is the parents parent for another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to both desktop and mobile devices. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Components

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

Components are available from any palette. For example, one of the Theme 2.1 palettes 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. You can create these yourself by combining components or you can use the layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:

• Tile is an area container with styling to control its size and the layout of its child components.
  • Header is an area which contains:
    • an icon 
    • a static text text field for the header.
  • Body , is an area which contains: (in the illustration, the body area is empty. This is where you can add )
    • data components, such as a grid displaying table data
    ,
    • or form fields
    . The body area has
    • styling to control its size and the layout of its child components. It also has spacing around its edge.
  • Footer,  is an area which contains:
    • a set of buttons
    . 
    The
    • , which the application user will use
    the buttons
    • to make changes to the data
    will appear
    • that appears in the body
    .

Finding Layouts and Components

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

It can be very useful to find a layout, component or container. There are two ways to 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 Components