This page is for application designers. It explains the basic principles for how to add components from the palette as well as features to help you.
Overview
If you are new to PhixFlow and designing screens for an application, start with the Building Applications training course.
This page is a reminder of the drag-and-drop principles that you use when designing screens.
- Dragging components
- Drag -sibling
- Shift Drag child inside
- Preferred parent link → Drag puts it directly inside PP (child) AND as a sibling of any other content. eg. Tile container has many tiles.
- Parent child and preferred parent - link out
- Reordering on screen and in repository
Dragging into a Screen
To add a component to a screen, you can drag in:
- components or layouts from
- the palette
- the repository → Templates (anywhere else.
- streams (tables) or their attributes, to add data-bound components such as grids, charts or form-fields.
...
component or layout
...
repository Layouts or Layout Templates
...
repository → Tables
table properties top left icon=
...
stream (table)
...
todo - link to process for this select and drag onto fiew
Select a component (grid, graph, chart or form) and view options
data-backed component
...
anywhere on a screen
- directly onto a screen
- directly onto a screen element
- onto an area
- onto a form (area)
...
A card view todo - this appears to no longer happen
Prompts for a data component.
...
todo - link to process for this
data-backed component
...
the header of a data view component
...
A button in the banner to run the action
todo - I may not have an approprite action but I cannot drag this onto a grid header
...
the header of a data view component
...
todo - Attempting to drag a pinned component: at the moment this is copying BUT I cannot seem to unpin.
When you drag an unpinned component to a different place on the screen, it will be automatically assigned to the parent you drop it into (for example, an area), and it will be dropped in the position that you drop it. So if you drop it in the middle of a set of fields inside an area, the fields underneath will be shuffled down to make space for it.
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
When you drag items from the repository onto a screen, PhixFlow creates a component using the default template for that item. So it is important to make sure that you have set the right default component palette. This is set in System Configuration. Remember that this default will apply to all users of this PhixFlow instance. |
To drop an item onto a form that would normally be created unpinned (see table above) as pinned - hold the Ctrl key down while dragging.
Pinning and Unpinning
You can fix the position of a component on an area by pinning it. When you drag a component or layout in from the palette it is automatically pinned. (See the table above for all pinned/unpinned) todo.
| Note |
|---|
For components and layouts added from the Theme 2 palette, the properties have been set to allow responsive flow of the components, which override pinning. |
Unpinned
When you drag in an unpinned component, PhixFlow automatically puts it in in the next space available. By default, this is underneath the previous component. However, you can control the flow using CSS properties. Components in forms are represented as DIV objects.
You can drag unpinned components around in their parent component, and PhixFlow puts them wherever you drop them.
You can also manually control the order of unpinned components by editing the Order field in the details of the component. This is found in the Positional Settings section of the details. The video above gives an example of using both of these methods - dragging, and manual update.
Pinned
Pinned components can be placed anywhere on an area and you can drag pinned components to any position on a screen.
You can pin the edges of the component to its parent component using the Positional Settings in the component's details. To do this, set the offsets between the top, right, bottom and left edges of the component to those of the parent. The offsets are in number of pixels between the edge of the component and the edge of the parent.
| Tip |
|---|
If you set the right or bottom offsets in Positional Settings, this overrides any width or height set for the component. |
Switching Between Unpinned and Pinned
Pinned components can be dragged over unpinned components, so be careful when mixing pinned and unpinned components on a form. Think of these as being laid out in two separate, overlapping layers on the screen.
To change an unpinned component to pinned, press Ctrl and drag it.
To unpin a pinned component, right-click on it and select Unpin Selected Objects. You can select several components at once, and unpin them all using this option. The components will move into the next available space in their respective parent components.
Preventing Accidental Dragging
Pinning relates to a components parent-child relationship. It does not
Fix a component in position on the screen.
To Fix a component, use the position properties. Avoid if you want responsive design
To prevent accidental dragging.
To prevent accidental dragging of components and layouts on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.
...
To find the container of a component in a screen, you can:
- right-click on the component and select Find in Explorer .
PhixFlow opens the Layouts with the component selected. You can then see how the selected component fits into the parent-child hierarchy. - click on the space next to the component to open its properties.
This option is less reliable as a screen becomes more complex.
| Note |
|---|
Remember to check whether or not the component/layout is pinned. A pinned component always keeps the same parent, even if it is moved away from it on the screen. |
Moving Components and Layouts
You can move components and layouts around on the screen, but we recommend you use the repository Layouts list as it is easier to drag layouts and be clear about the parent and sibling relationships you want.
To move a component or layout to a new parent, press Shift and drag it to the new parent. Commonly this is used to move components inside an area to a new area.
To confirm that the component has moved to the new parent, remember the techniques to find the parent of a component: Find a component's parent
Auto Sizing
When you are designing a screen, you can use the Layout area → Style Settings→ Auto-size property to make components adjust automatically when the application's window is resized by the user.
| Note |
|---|
If you manually resize a component as you are designing a screen, it will automatically switch off the Auto Size property. |
...
Build Up a basic form
Note that there are no fancy flow stuff for this.
What data do you need to show -
- Create screen
- Open palette
- Add Basic Components > Form, and name
- Click on the screen to open the properties for your area. In shared styles you will see that this has some default shared styles applied.
- Palette Labelled fields > Add labelled fields you need. Click to see properties
- The Labelled fields palette has composite items - see the Basic Settings checkbox.
- there are two parts, a static text label and the data field. Making them composite means
- They move as if they are one thing
- The name you give to the items is used as the text for the label.
- Attributes list - open stream > attributes section or expand for list in repository
- Drag from attribute onto form
Dividing screens
There are 2 ways to divide a screen.
Use Context Menu Options
...
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
To divide a screen into multiple sections:
- either, from the palette select a layout that is already divided by a horizontal or vertical split; see Divide a Screen Using a Palette Layout, below.
- or in an area right-click to show the popup menu and select on of the Add Area... options; see Divide a Screen Using "Add Area" Options, below.
| Anchor | ||||
|---|---|---|---|---|
|
Divide a Screen Using a Palette Layout
Some palettes have layouts that have 2 areas contained by a split-view area. For example:
- Serene Grey - Basic Components → Area Split
These can be used to divide your screen into separate areas while also providing a splitter which allows designers and users to resize the areas.
Setup
- In the screen canvas toolbar, click
.Insert excerpt _palette _palette nopanel true - Expand a palette to find a layout that has 2 areas.
- Drag the layout from the palette onto an existing area.
- PhixFlow creates a layout with the following structure, this example is horizontal but vertical options are also available.
If you have existing content on your screen this can be dragged into the appropriate area using the repository or layout section. Remember you will need to hold the shift key to drop content inside these areas.
Divide a Screen Using the "Add Area" Options
| Anchor | ||||
|---|---|---|---|---|
|
- Right-click a screen.
- Click Screen Options.
- Use one of the Add Area... options to add a new
...
- area for the screen, separated
...
- by a dividing line.
PhixFlow creates a new
...
- element in the form of a pane for this part of the screen.
...
- This new element is similar to a black screen and will require a suitable container, such as an area, form or card container in order for you to display content.
...
| Tip |
|---|
If you right-click on an existing area, in the context menu click Dashboard Options to see the Add Area options. |
Use a Palette Layout
Some palettes have layouts that have 2 areas contained by a split-view area. For example:
- Basic Components → Split View
- Theme 2 - App Builder Base Components → Area Split
...
Area
Split View (special type of area)
Area 1
Area 2
Connecting Layouts to Data
To connect a form area to data in a stream (table)
From the repository, drag the stream name onto an area or layout
From the stream (table) properties, drag the icon at the top of the properties onto an area or layout.
Todo - check and link
PhixFlow will prompt you to select the type of stream or card view that you want to create; see Stream Views Pop-Up Menu.
...
The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:
...
-
It may be easier to add one of the complete screens to the new element and remove the items you do not require.
Resizing
To resize a pane, drag its dividing line. This automatically resizes adjacent panes.
To prevent resizing, right-click to display the popup menu and select:
Insert excerpt _area_lock_width _area_lock_width nopanel true Insert excerpt _area_lock_height _area_lock_height nopanel true
Removing a Pane
First, delete any layouts or components in it.
- Right-click on the empty pane to display the popup menu.
- Select
Pane.Insert excerpt _delete_item _delete_item nopanel true Anchor add-area add-area