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 |
|---|
...
|
...
|
...
If a single read brings back a number of records exceeding 90% of the specified cache size, a warning message will be logged to the console.
If a single read brings back 100% or more of the cache size, and the enforce cache size limit flag is ticked in the system configuration, then the analysis run will stop completely.
| Code Block | ||
|---|---|---|
| ||
The Pipe "stream_name.lookup_pipe_name" cache is 100% full (the cache size is 10). |
...
|
| 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 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. |
...
(Notes for pop out hints box: To control which components are drawn on top of which you can add a zIndex css tag in the ‘CSS Properties’ sections of the relevant components. The value of the zIndex tag should be a number and components are drawn on top of each other in ascending sequence of zIndex numbers.)
Pinned components
This is done using the Positional Settings of the component. The offsets are set as the number of pixels.
Note that if you set the right Positional Settings, this overrides any width set for the component. Similarly, if you set the bottom Positional Settings, this overrides any height set.
| Note |
|---|
control which is next available space using CSS? |
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
| 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 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:
...
| 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 |
...
(Note for pop out hint box: In order to drag components onto a form in this way please remember to set up the default component palette to use in System Configuration and make sure that palette specifies which template to use for each type of item being dropped onto the form.)
When any of the above items are simply dragged onto a form and dropped onto another component then, by default, it will be added to the form below the component on which it was dropped inside the same parent component as the component on which it was dropped. For example, if you have an area inside a form which containers 3 input fields and you drag a stream attribute and drop it onto the second field then a new field will be created below the second input field.
If you want to drop a component onto a specific area of a form and drop the component inside that area (i.e. make that area the parent of the new component) then you should hold down the shift key while you drag and drop the component.
If you want to drop a component into a fixed position as a pinned component then you can simply hold down the control key as you drag the component onto the form.
You can combine these extra keys so if you want to drag a new component to a fixed position inside an existing area then you can hold down the control and shift keys as you drag and drop the component onto the target area.
Dragging components to lay out forms
To move a component you can simply drag the component around the form.
Pinned components will simply be moved and their top, bottom, left and right settings updated to reflect their new position.
Unpinned components will not move but you will see the drag and drop circle move as you move the mouse. If you drop this circle onto another component then the component you started dragging will have its sequence number changed to be that of the component that you dropped it onto. This will cause the sequence numbers of all other components with the same parent to be updated and the unpinned components are then redrawn in their new sequence. If the component you dragged originally had a lower sequence number than the one you dropped it onto then it will be drawn after the one you dropped it onto. Conversely if it originally had a higher sequence than the component you dropped it onto then it will be drawn before the component you dropped it onto.
Preventing components from being dragged
Sometimes you may find yourself dragging and moving the wrong component by mistake. To reduce the chances of this happening for components which you are unlikely to want to move (such as fixed headers, footers or tab components) you can tick the ‘prevent dragging’ box in the ‘Position Settings’ section of the component editor pane. This will turn off all dragging for this component including being able to resize the component by dragging the edges. To allow dragging again simply go to the editor and untick the ‘prevent dragging’ box.
Changing an unpinned component to pinned
If you wish to pin an unpinned component to a fixed position then you can so by holding down the Control key as you drag the component. With the control key down the component will be converted to pinned component and its top, and left settings will be adjusted to reflect the new position to which you drag it.
Changing a pinned component to unpinned
If you wish to unpin a component so that it floats to the next available position you can simply highlight the components you wish to unpin and then select ‘Unpin selected components’ from the right click context menu.
Changing the parent of a component
(Notes for a pop out hints box: You can see what the parent component is for any layout component either by clicking on the component in the form or looking in the Parent Details section of the editor form. When you click on a layout component it is highlighted with a green box drawn around it and its parent is highlighted with an orange box drawn around it. The only exception is for components drawn on the top level area (usually referred to as the form itself) which is never highlighted.)
By default when you drag and drop a component onto an area it doesn’t make the target area the new parent of the component instead, if it is an unpinned component, it simply takes the sequence number of the target area as the new sequence number of the dropped component so that it will be drawn in a new position on the form.
...
| 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. 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
| Anchor | ||||
|---|---|---|---|---|
|
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.
| Anchor | ||||
|---|---|---|---|---|
|
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.