Versions Compared

Version Old Version 32 New Version 33
Changes made by

Fiona Sargeant

Anthony George

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


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.

These components may not be available directly from the palette. You can create a data component by dragging a stream onto a dashboard. 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 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
Anchor
formBuildingFindComponentParent
formBuildingFindComponentParent

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 

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, the repository can be manually searched, simply expand the 
Insert excerpt
_components
_components
nopaneltrue
 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. 


Tip

For the selected Layout or Component, the Parent Details section at the top of the properties tab indicates the application or package to which it belongs. For example a component that is shared between several applications will have a package as it's parent.


Excerpt
nameMovingComponents

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


Special Cases

NameDescriptionExample
Prevent Dragging

Components can be marked with Prevent Dragging, this stops an item from being moved on a screen. It is however still moveable within the repository. This setting can be found in the items Properties → Design tab → Position Settings section.

In the example below we may want to fix the header in a set location, and therefore set it to Prevent Dragging.

 

Composite Component

Composite components are a set of components grouped into a special layout that is essentially locked and moves as a single component. New items cannot be added to a composite component while they are a composite. The for enabling an disabling a composite component are available in Properties →  Basic Settings → Composite Component

Form Fields are composite Components

Preferred ParentComponents marked with a preferred parent will be placed inside a designated parent object.

In the example below a tile is being dragged onto a screen from the palette. The tile container is highlighted in blue as it is the preferred parent of the tile.

PinnedPinned objects have an absolute position and therefore will be moved where they are dragged. Components can be pinned using right-click → Unpin/pin Selected Object