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: PhixFlow Training - Building Applications /wiki/spaces/DEL/pages/1051525179
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
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
By default, the next available space will be 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 represents represented as DIV objects. Future versions of PhixFlow will features feature easy to use options to control which space components will flow into. |
...
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
| Anchor | ||||
|---|---|---|---|---|
|
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 form details for the component; at the top of the formdetails, the name of the parent will be shown - to get more details, click on the quick link Parent to open the form 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
...
New layout components can be added to a form by dragging and dropping any of the following:
| Drag from | Drag on to | Creates | Pinned/Unpinned |
|---|---|---|---|
A template from a palette or from the repository browser | Form | A component based on that template | Pinned |
| An attribute from a stream | Form | An input field | Pinned |
| A stream view from a stream | Form | A stream view component | Unpinned |
| An action from a stream | Form | A button on the form to run the action | Unpinned |
| An action from a stream | Banner of a stream view component | A button in the banner to run the action | - |
| A stream | Form | A card view | Unpinned |
| A dashboard | Banner of a stream view component | A button to open the dashboard | - |
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 browser, they will be created using the default template for that object. This is apart from when you choose a template from a palette or the repository browser. 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 move unpinned components around by dragging them. You can also manually control the order of unpinned components by editing the Order field in the form for details of the component. This is found in the Positional Settings section of the formdetails. The video about above gives an example of using both of these methods - dragging, and manual update.
| Anchor | ||||
|---|---|---|---|---|
|
You can drag pinned components to an 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 formdetails. These specify the offsets, in numbers of pixels, between the edge of the component and the edge of the parent. An example of pinning the 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. Similarly, if you set the bottom Positional Settings, this overrides any height set.
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, This Think of these as being laid out in two separate, overlapping layers on the form.
...
To change an unpinned component to a pinned, press the Ctrl key down and drag it.
...
To confirm that the component has used moved to the new parent, remember the techniques to confirm 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 formdetails. This is found in the Positional Settings section.