This page is for application designers. It explains how the structure of a screen is made up of layouts and components.
Overview
A screen is made up of components (the smallest building block) and layouts (set of preconfigured components) arranged into layers. Components are items such as areas, static text labels and form fields which display data from a table.
Screen Layers
A typical screen has a layered structure, in which the
Components
These are the most basic building blocks that are combined to design a screen.
Components are available from any palette, for example theme 2.1 they can be found under Basic Layouts. For every component you add, you need to give it a name and specify the formatting using the Component properties. It's a good idea to include a meaningful description too.
The basic components are:
Containers | Data Fields | Text Fields | Data Components |
---|---|---|---|
Containers are designed to hold other components | Data fields are designed to display data from an attribute. | Text fields are designed to be labels. | These components may not be available directly from the palette. You can create a data component by dragging a stream onto a dashboard. PhixFlow prompts you to choose a: |
|
|
|
|
Layouts
Layouts are a set of combined components. You can create these yourself by combining and styling components or you can use the pre-built layouts from a palette (recommended). For example, a simple layout is a tile, this is illustrated below:
- Tile contains the styles which make the area look lie a tile and controls the layout of its child objects.
- Header, an area which contains an icon and a static text.
- Body, a simple area that controls the layout of items places inside it, including the addition of spacing around its edge.
- Footer, area which houses a set of buttons used for updating content associated to the tile.
Finding Layouts and Components
It can be very useful to find a layout, component or the items which contains them. There are two ways to achieve this:
Using the Layers
The Layouts navigator is expandable from the left hand side. Selecting an item from the canvas will highlight it in the layouts, and selecting an item in the Layouts with highlight it on the canvas.
If the layer section is not visible click Show/Hide Layer Panel.
Using find in Repository
Right-click any item on an unlocked screen and select Find in Repository Alternatively, the repository can be manually searched, simply expand the Components branch and navigate to the desired item. The position of the components on a screen is reflected in their order and nesting in the repository list.
For the selected Layout or Component, the Parent Details section at the top of the properties tab indicates the application or package to which it belongs. For example a component that is shared between several applications will have a package as it's parent.
Moving Layouts and Components
On Screen
- Click and hold on a layout or component
- Drag it to the desired location to create a sibling relationship.
- Dragging in this way creates a sibling relationship. For example, if you drag ad drop a field on top of another field they appear next to each other.
- Or hold shift and drag it to the desired location to create a parent child relationship.
- Shift-drag creates a parent child relationship, where your dragged item drops into an appropriate container.
In the Repository
- Click and drag them in the Componentssection of the repository to change their position on the screen.
- To move a layout or component into a new container, hold Shift and drag it to the new container. Commonly this is used to move one item inside another item.
Special Cases
Name | Description | Example |
---|---|---|
Prevent Dragging | Components can be marked with Prevent Dragging, this stops an item from being moved on a screen. It is however still moveable within the repository. This setting can be found in the items Properties → Design tab → Position Settings section. | In the example below we may want to fix the header in a set location, and therefore set it to Prevent Dragging.
|
Composite Component | Composite components are a set of components grouped into a special layout that is essentially locked and moves as a single component. New items cannot be added to a composite component while they are a composite. The for enabling an disabling a composite component are available in Properties → Basic Settings → Composite Component | Form Fields are composite Components |
Preferred Parent | Components marked with a preferred parent will be placed inside a designated parent object. | In the example below a tile is being dragged onto a screen from the palette. The tile container is highlighted in blue as it is the preferred parent of the tile. |
Pinned | Pinned objects have an absolute position and therefore will be moved where they are dragged. Components can be pinned using right-click → Unpin/pin Selected Object |
Preventing Accidental Dragging
todo - check if this is only related to accidental dragging in design mode - no effect on movement due to responsive design?
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, in the component properties → Positional Settings section, tick Prevent Dragging.
todo - What is the role of pin/unpin compared to this
Take into account fixed components and layouts prevent responsive changes to the screen layout, for example if a user changes the screen size of your application on a desktop window, or if it is being displayed on a mobile device.
Themes have been designed to be responsive
Grouping Components
You can group to components together so that PhixFlow treats them as a single item when you drag. This is useful where you have a data field and static text label that you want to keep together. The palette includes prebuilt labelled fields that you can drag in that are already grouped. This type of layout is made up of at least 3 components:
- a form component, with the settings:
- Basic Settings → Composite ticked
- Advanced → View Type → field container
- the child components
- a static or dynamic text field
- a data field, such as string, number or date.
How to Group Components
To make your own grouped components:
- In the dashboard, add a form component.
- In a basic components palette, such as Basic Components, drag onto a form container:
- an area to be a container
- the components you want to treat as a single layout
PhixFlow adds these all as siblings.
Right-click one of the new fields and select Find in Repository. PhixFlow displays the component in the repository layouts list.
Within the repository list, shift-drag to move the components into the container you created.
Open the properties for the container. In Basic Settings, tick Composite.
Field Containers
PhixFlow has another property that you can use on its own or within a composite component. The option is Advanced → View Type → field container. When this is selected, PhixFlow uses the name of a container as the label on a field. todo-Fiona check
Adding Text and Labels.
Creating Responsive layouts
Some palettes (e.g. those for Theme 2) have been designed so that layouts and components arrange themselves as you add them. These are called Tiles in the Theme 2 palette. If you use palettes not in Theme 2, you will have to set options to ensure components are arranged correctly (see style pages).
Lay things out using horizontal or vertical flow, with layouts allowed to flow relative to each other - avoid static styles
Most components or layouts dragged from the palette must be dragged onto an appropriate container (Area, form, card container)
You can drag data or data components directly onto an element
See also
Styles
- Use the styles set in the theme
- Adapt the theme by editing the styles of components or shared styles
- Create your own components and set the styles.
For an individual component, whether you create it yourself or drag it from the palette, any styles set in its properties are its own.
You may want your components to reflect a change you make in one place. To do this, use a shared style on all your components. For example you could set the colour of all buttons using a shared style. If you decide to use a different button colour, you can change it once in the shared style and all the buttons in your application will change colour.
Binding to Data
You can add data components to a dashboard without using the palette, by simply dragging a stream onto a dashboard, dashboard element or area. PhixFlow prompts you to select the type of data component. Optionally, you can create a data view, by add related attributes, sorting and filtering; see Showing Data on a Screen.
Alternatively, you can bind data to a form or card container by dragging a stream or stream view onto Basic Settings → Stream, or Stream View Name properties.
How tos
todo - move this to it's own page.
Reminder of the training, specific techniques.
Build Up a basic form
Note that there are no fancy flow stuff for this. Ask Sarah or Anthony? Classic for videos
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 theBasic 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