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 Course.
A more detailed description of drag and drop functionality is given below, but the following videos will introduce you to the basic concepts:
...
| 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. |
...
| 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 | - |
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
When you drag objects onto a form from the repository browser, 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. |
...
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. |
You can use the context menu option
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|