Insert excerpt

	_Banners
	_Banners
name	screen
nopanel	true

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 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 the Layers are one layer is the parents for other layersanother 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 . For example, one of the Theme 2.1 they can be found under 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.	These Data components may not be available directly from on the palette. You can create a data component by dragging a stream onto a dashboardInstead, 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 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 text field for the header.
- Body, in the illustration,
a simple area that controls the layout of items places inside it, including the addition of
- 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
houses
- contains a set of
buttons used for updating content associated to the tile
- 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 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 pane to highlight it on the canvas.

If the layer section is not visible click

Insert excerpt

	_layer_slider
	_layer_slider
nopanel	true

.

Using Find in Repository

Right-click any item on an unlocked screen and select

Insert excerpt

	_repository_find
	_repository_find
nopanel	true

Alternatively, to search the repository can be manually searched, simply expand the Insert excerpt_components_componentsnopaneltrue branch and expand the Components section and navigate to the desired itemcomponent. 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, To check whether a component is shared with multiple applications, open its properties and check the Parent Details section at the top of the properties tab indicates , which names the application or package to which it the component belongs. For example a component that is shared between several applications will have has a package as it's parentits parent; see Package.

Anchor

	moving
	moving

_layers

panel. When you select move a component on the screen, PhixFlow automatically highlights it in the Layers panel.

In the Layers panel, click and drag a component to a different location in the list of components. PhixFlow moves the component on the screen canvas.
If the 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

the

its children move with it.

To move a layout or component inside another item, hold Shift and drag it onto the desired container.

For moving components that are 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

Excerpt

name	MovingComponents

Moving Layouts and Components

In the Layers Section

To move components that are on the screen canvas, use the

Insert excerpt

_layers

nopanel

true

Insert excerpt

	_layers
	_layers
nopanel	true

Panel

To move components on the screen canvas, we recommend that you use the

Insert excerpt

	_layers
	_layers
nopanel	true

panel. This makes it easy to see container components that can be hard to select on the canvas. It The hierarchical list also makes the parent-child relationships clear. You can then select and drag an individual components or groups a group of components up and down the hierarchy to move them in the screen canvas. How items move in the canvas depends on whether they are flowing in rows or columns; see . For example, if you move a form field in the Insert excerpt_layers_layersnopaneltrue

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.

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 they appear , PhixFlow puts them next to each other.
Or hold Shift and drag the component to the desired location. This will drop it Move into:
On the canvas, Shift+click and drag and drop onto another component.
PhixFlow moves the component inside the other component. This creates a parent child relationship.

In the Repository

Click and drag a layout or components in the

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.

Name

Description

Example

Prevent Dragging

To stop a component from being draggable on the screen canvas, in Component properties →

Insert excerpt

	_

components

property_tabs
	_

components

property_tabs
name	style
nopanel	true

section of the repository to change their position on the screen.

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

Name

Description

Example

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 → 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.

Composite Component

Composite components are a set of components grouped into a special layout that is essentially locked and

To create a grouped layout the 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

Image Removed

Preferred Parent

Components 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.

Image Removed

Pinned

, in Component properties →

Insert excerpt

	_property_tabs
	_property_tabs
name	basic
nopanel	true

→ 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 Added

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_tabs
name	basic
nopanel	true

→ Basic Settings:

Layout Categories
and the Preferred Parent Categories section; see Component Categories and Preferred Parents.

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 Added

Pinned

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

Insert excerpt

	_pin_unpin
	_pin_unpin
nopanel	true

. Pinned objects have an absolute position and

therefore will be moved

move where they are dragged.

Components can be pinned using right-click → Unpin/pin Selected Object

Version	Old Version 35	New Version 36
Changes made by	Fiona Sargeant	Fiona Sargeant
Saved on	Aug 24, 2022	Aug 24, 2022

Versions Compared

Key

Overview

Screen Layers

Components

Layouts

Finding Layouts and Components
Anchor
formBuildingFindComponentParent
formBuildingFindComponentParent

Using Layers