This page is for application designers. It explains the basic principles for how to add components from the palette as well as features to help you.
Overview
To create a screen you start with a dashboard. Optionally, you can divide a dashboard into different parts using the dashboard pop-up menu Add Area... options. Then you drag prebuilt layouts from the palette onto your screen.
The prebuilt layouts are made up of individual components.
todo - go back to the component page and put a link to this page instead of all the overview stuff.
Components
These are the most basic building blocks that are combined to design a screen.
A component can be:
- a container for other components. Containers divide up a dashboard into different parts, such as a header, body or footer.
- the fields and labels that make up a form. There are different fields for text, numbers and drop-down selection lists.
- something that displays data, such as a grid, chart or card. These are called data components.
- menus and buttons to help users navigate.
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Overview
A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are areas, static text labels and fields, which display data from a table. Multi-component layouts can be simple, such as a label and a field, or more complex parts of a screen with responsive design, these are called tiles. Layouts can also be full screens.
Screen Layers
A typical screen has a layered structure, in which one layer is
Components
Components are the most basic building blocks that are combined to design a screen.
Components are available from any palette. For example, the Serene Grey palette has the Basic Layouts section which contains components, such as an area. 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 |
---|
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Containers
Text Fields | Data Components |
---|---|
Containers are designed to hold other components |
- area
- form
- card container
. | Data fields are designed to display data from an attribute. | Text fields are designed to be labels. | Data components may not be available on the palette. Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a: |
|
|
Text Fields
|
|
|
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 groups of preconfigured components. You can create these yourself by combining components or you can use the
layouts from
a palette (recommended). For example, a simple layout
for a tile is illustrated below:
- Tile is an area container with styling to control its size and the layout of its child components.
- Header is an area which contains:
- an icon
- a static text field for the
- Header is an area which contains:
- header
- Body is an area which contains: (in the illustration, the body area is empty)
- data components, such as a
You can build up layouts to create a whole screen. Some layouts on the palette are called tiles. These include settings to ensure responsive changes to your dashboard as the screen size changes.
Basic Layouts: The following basic layouts have component properties that apply to them.
- button
- labelled number field
- labelled date field
- labelled date-time field
- labelled drop-down field
- labelled true/false field
- tab header
- tab display area
Basic components and layouts in a palette
Parts of a Screen
The following illustration shows a screen layout that is made up of:
- a dashboard: this is the canvas on which you create layouts; see Dashboard
- 2 dashboard elements, divided by a horizontal line; see Dashboard Elements
- Top part: a grid component
- Bottom part: has a layout comprising
- a form container - indicated by the orange dashed line, which contains
- static text fields
- data fields
- a form container - indicated by the orange dashed line, which contains
You can use these principles to build up more complex screens, with multiple dashboard elements, containers and components.
Finding Layouts and Containers- grid displaying table data or form fields
- styling to control its size and the layout of its child components. It also has spacing around its edge.
- Footer is an area which contains:
- a set of buttons, which the application user will use to make changes to the data that appears in the body
Finding Layouts and Components
Anchor | ||||
---|---|---|---|---|
|
In most cases, a component's container 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 container, into another area, so that the component now appears in an area that is not actually its container.
It can be very useful to find a layout, component or container. There are two ways to
do this:
Using
In the repository, you can see the different elements listed under the dahboard.
In the PhixFlow repository, there is a Layouts branch. The position of the components on a dashboard is reflected in their order and nesting in the repository list of layouts. To rearrange layouts on a screen, you can drag component to a different position in the Layouts branch of the repository.
- Your screens are in Dashboards
- Elements are in Dashboards > Elements
- For anything else on a screen, it is listed
under Layouts - The nested structure of layouts
(container/children) is reflected
in the repository Layouts - To find where a component is in the
repository, right-click it and select Find
Notice the heirarchical stucture. This shows how layouts are nested, with parents/children and siblings.
Using Properties
Right-click and selectLayers
The Layers pane is expandable from the left of the screen canvas. Select an item:
- on the canvas to highlight it in the Layers pane
- in the Layer pane to highlight it on the canvas
If the layer section is not visible, click
. Insert excerpt _layer_slider _layer_slider nopanel true
Using Find in Repository
Right-click any item on an unlocked screen and select
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
You can drag components around in the repository to change their position on the dashboard. This means you can be clear about where something is in the layout hierarchy.
Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list.
Tip |
---|
To check whether a component is shared with multiple applications, open its Properties and check the Parent Details section, which names the application or package to which |
the component belongs. For example, a component that is shared between several applications |
Moving Layouts
Affected by
- pinned/unpinned - unpin a pinned item
- don't drag - untick dont drag
- field container/composite - moves items as grouped
- preferred parent - affects the drop. Assumes you want to put the dropped component/layout into the preferred parent container.
Can be done in the repository Layouts (recommended) or in the screen.
PhixFlow needs to know when you drag something whether or not you want to create a sibling relationship or parent child relationship. Dragging on screen this can be ambiguous.
To make sure you are moving a whole parent/child set of things and moving them within an area it is easiest to move things in the Layouts list in the repository
Animation of dragging in the
On Screen
Assuming its free to move,
Drag creates a sibling relationship. So if you drop it on a field, it goes next to the field. If you drop it on a container, it goes next to the container.
Shift-drag creates a parent child relationship, where you can only drop onto an appropriate container.
In the repository
To move a component to a new container, press Shift and drag it to the new container. Commonly this is used to move components inside an area to a new area.
To confirm that the component has moved to the new container, remember the techniques to find the container of a component, above.
You cannot add to an area or form that is set as Advanced → View Type → field container. You need to unset this option, add the additional components, then reset the option; see Associating Text with a Field.
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
You can group to components together so that PhixFlow treats them as a single item when you drag.
- Add an area
- Put the items you want to group into the area
- In the area properties tick Composite Component
Another option that you can use on its own or, often, with a composite component.
- Field container (closed)
- - you cannot put anything inside
- Pass your field container name to the label
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
The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:
has a package as its parent; see Package. |
Moving Components
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|