...
- 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
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
Dragging into a Screen
To add a component to a screen, you can drag in:
...
| Drag From | Item | Drag on to | Creates | Pinned/Unpinned|
|---|---|---|---|---|
| Palette | component or layout | anywhere on a screen |
| Pinned |
repository Layouts or Layout Templates | component or layout | anywhere on a screenPinned | ||
| repository → Table → Attribute a pop-up list of attributes | attribute | an area | An input field and label | Pinned|
repository → Tables table properties top left icon= | stream (table) | an area | 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 x | |
| stream (table) | anywhere on a screen
|
Prompts for a data component. | Unpinned | |
| repository → Table → View a pop-up list of views | view | area or component that displays data | todo - link to process for this data-backed component | Unpinned todo - check, showing as pinned|
| repository → Action | free-action | area or form | A button to run the action | Unpinned todo - check, showing as pinned|
| repository → Action | free-action | 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 | - |
| repository → Dashboard | another screen | the header of a data view component | A button to open the dropped screen | -
todo - Attempting to drag a pinned component: at the moment this is copying BUT I cannot seem to unpin.
...
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
...
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
Order - Child items have an order in their parent. For example if there are 4 labelled fields, use the order number to specify the order in which they are listed. By default fields flow vertically, that is the order 1 field is at the top of the area, and 2 is below. If you set horizontal flow in the area Style Settings → Direction → No selection = column. change to row, they appear side by sdie
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.
...
You can use the context menu option
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Build Up a basic form
Note that there are no fancy flow stuff for this.What data do you need to show -
...
- 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.
...
Dividing screens
There are 2 ways to divide a screen.
...