Versions Compared

Version Old Version 36 New Version 37
Changes made by

Fiona Sargeant

Fiona Sargeant

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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 a lable 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 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 has the 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:


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


Prevent DraggingTo stop a component from being draggable on the screen canvas, in Component properties → Insert excerpt_property_tabs_property_tabsnamestylenopaneltrue → Position Settings → tick Prevent Dragging.

You can still move the component within the Layers panel.

Use Prevent Dragging to fix the header within the container so it cannot be accidentally moved from the top.

 Image Removed

Composite Component

To create a grouped layout the moves as a single component, in Component properties → Insert excerpt_property_tabs_property_tabsnamebasicnopaneltrue → Basic Settings → tick Composite Component.

For information about creating and changing composite components, see Using Composite Components.

When you drag an attribute onto the screen canvas, PhixFlow creates a composite component, consisting of a label and a field.

Image Removed

Preferred Parent

Theme 2.1 palette components and layouts are configured with a preferred parent. When you drag a component on the screen canvas, PhixFlow recognises a parent component and automatically puts the dropped component inside. You do not need to use Shift+drag.

To configure a component as a preferred parent, use Component properties → Insert excerpt_property_tabs_property_tabsnamebasicnopaneltrue → Basic Settings:

The screenshot below shows a tile from the palette being dropped onto the canvas. PhixFlow highlights the preferred parent component with a blue outline to show this component can be a tile container. The cursor appears as a green circle with an arrow, to indicate you can drop the component here.

Image Removed

Pinned

On the canvas, right-click a component to show its popup menu and select 

Insert excerpt_pin_unpin_pin_unpinnopaneltrue. Pinned objects have an absolute position and move where they are dragged.

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, 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, area which contains a set of buttons. 
      The application user will use the buttons to make changes to data will appear 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 pane to highlight it on the canvas.

If the layer section is not visible click 

Insert excerpt
_layer_slider
_layer_slider
nopaneltrue
. 

Using Find in Repository

Right-click any item on an unlocked screen and select

Insert excerpt
_repository_find
_repository_find
nopaneltrue
 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. 


Tip

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.

Anchormovingmovingexcerpt

nameMovingComponents

Moving

Layouts and

Components

When you move a component or layout, you drag it onto another component. 

  • drag and drop places a component next to the component on which you drop. This creates a sibling relationship. 
  • shift+drag and drop places a component into the component on which you drop. This creates a parent-child relationship.
If you drag a component that is a parent, all its children move with it.

The location that PhixFlow places components on the screen canvas depends on whether the container is configured to flow in rows or columns. For example, if a container is set to flow:

  • in rows, PhixFlow puts a component on the right
  • in columns, PhixFlow puts a component below.  
Moving Using the 

Insert excerpt

_layers_layersnopaneltrue PanelTo move components on the screen canvas, we recommend that you use the  Insert excerpt_layers_layersnopaneltrue panel. This makes it easy to see container components that can be hard to select on the canvas. The hierarchical list also makes the parent-child relationships clear. You can select and drag an individual components or a group of components up and down the hierarchy to move them in the screen canvas.

To find a component in the Layers panel, on the screen canvas click a component to select it. PhixFlow automatically highlights it in the Layers panel.

  • Move next to:
    In the Layers panel, click and drag a component to a different location in the list. 
    PhixFlow moves the component to be next to the component:
    • where you drop in the list
    • and also moves the component on the screen canvas.
  • Move into:
    To move a layout or component inside another component, in the Layers panel, hold Shift and drag it onto a container component in the list. 
    PhixFlow moves the component into the component:
    • where you drop in the list
    • and also moves the component on the screen canvas.
Tip

The Layers panel  lists the components from the repository Layers section. You can also move components within the Layers section of the repository in the same way as you can move them in the Layout panel.

Moving on Screen

To move components around on the screen canvas:

  • Move next to:
    On the canvas, click and drag a component and drop onto another component 
    PhixFlow moves the component next to the drop location. For example, if you drop a field on top of another field, PhixFlow puts them next to each other.
  • Move into:
    On the canvas, Shift+click and drag and drop onto another component.
    PhixFlow moves the component inside the other component. For example, if you drop a field onto an area, PhixFlow puts the field into the area.

Special Cases

When the following options are set the drag-drop behaviour is affected.

NameDescriptionExample

Moving Components on a Screen
Moving Components on a Screen
nopaneltrue
 See Moving Components on a Screen