Screen Structure

Owned by Fiona Sargeant (Unlicensed)
Last updated: Aug 30, 2023 by Zoe Baldwin
3 min read

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 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 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, 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:

Containers

Data Fields

Text Fields

Data Components

Containers are designed to hold other components.

Data fields are designed to display data from an attribute.

Text fields are designed to be labels.

Data components may not be available on the palette. Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a:

  • area
  • form
  • card container
  • true/false field
  • date field
  • date-time field
  • number field
  • string field
  • URL display
  • drop-down
  • fixed drop-down
  • dynamic text: text varies depends on backing data
  • static text: you specify the text you want to appear
  • grid
  • pie chart
  • line graph
  • horizontal bar graph
  • vertical bar graph
  • card

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 field for the header
    • Body is an area which contains: (in the illustration, 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 contains:
      • a set of buttons, which the application user will use to make changes to the data that appears in the body

Finding Layouts and Components

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 Layer 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, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 

To check whether a component is shared with multiple applications, open its Properties and check the Parent Details section, which names the application or package to which the component belongs. For example, a component that is shared between several applications has a package as its parent; see Package.

Moving Components

To Move a Component

  1. Drag it to the desired location, this can be done either in the  Layers section or on the screen Screen itself.
  2. A red line in the Layers section indicates where the item will be placed.
    1. To drop an item inside another component, hover over the right portion of the components to make it open.

  See Moving Content on a Screen.