Forms in PhixFlow can be built and laid out using drag and drop functionality. If you are new to form building, please see the introductory course: /wiki/spaces/HELP91/pages/9050666974.
A more detailed description of drag and drop functionality is given below, but the following videos will introduce you to the basic concepts:
| Widget Connector | ||||||
|---|---|---|---|---|---|---|
|
| Widget Connector | ||||||
|---|---|---|---|---|---|---|
|
Pinning and unpinning
A key concept behind dragging functionality in forms is pinning and unpinning. Unpinned components are placed into the next available space. Pinned components can be placed anywhere on the form, and you can pin the edges to the edges of the parent component by setting offsets between the top, right, bottom and left edges of the component to those of the parent.
Unpinned components
Unpinned components are placed automatically in the next space available.
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
By default, the next available space will be underneath the previous component - but this can be controlled in CSS. A full discussion of the CSS options for controlling this are beyond the scope of this article, but can be researched on the web. If you want to do this, note that components in forms are represented as DIV objects. Future versions of PhixFlow will feature easy to use options to control which space components will flow into. |
For further details about how to position unpinned components within a parent component, see Positioning unpinned components
Pinned components
Pinned components can be dragged to anywhere you want in the form. You can "pin" the edges of the component to its parent component. For further details on how to position pinned components on a form, see Positioning pinned components on forms
...
In most cases, a component's parent is fairly obvious - and you can find it by clicking just outside the area of the component. In some cases, it is not obvious. Remember also that with pinned components, you could drag a component from an area, which is its parent, into another area, so that the component now appears in an area that is not actually its parent.
There are a number of ways of determining a component's parent:
- Open the details for the component; at the top of the details, the name of the parent will be shown - to get more details, click on the quick link Parent to open the details for the parent
- Right-click on the component in the form and select Find in Explorer - this gives you a useful way of visually seeing what the parent is, and indeed how other components on the form relate to this component
Dropping components onto forms to create content
New layout components can be added to a form by dragging and dropping any of the following:
...
A template from a palette or from the repository
...
When you drag an unpinned component onto a form, 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 objects onto a form from the repository, they will be created using the default template for that object. 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.
Laying out forms
...
You can drag unpinned components around in their parent component, and they will placed 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.
...
You can drag pinned components to any position on a form.
You can "pin" the edges of the component to its parent component using the Positional Settings in the component's details. These specify the offsets, in numbers of pixels, between the edge of the component and the edge of the parent. An example of pinning a component to its parent in this way is given in the video above.
Note that if you set the right or bottom offsets in Positional Settings, this overrides any width or height set for the component.
Mixing pinned and unpinned components
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 form.
Switching between unpinned and pinned
To change an unpinned component to pinned, press the Ctrl key down 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.
Moving a component to a new parent
To move a component 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
Preventing components from being dragged
Sometimes, when laying out a form, you may find it interesting to "lock" a component in place, to stop yourself dragging it to a new position by accident. To do this, tick the Prevent Dragging flag in the component details. This is found in the Positional Settings section.
Connecting Forms to Data
You can connect forms to data in a stream by simply dragging the stream icon from its property tab onto the form. PhixFlow will prompt you to select the type of stream or card view that you want to create; see Stream Views Pop-Up Menu.
Auto Sizing
When you are designing a layout, 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 layout component as you are designing a layout, it will automatically switch off the auto-size property. |
...
| 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.
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