todo
- Screen (dashboard) and dashboard elements and in the repo
- Components and layouts Layout container/child relationships and page structure
- Types of component and what they look like
- Containers: areas, forms: is there any difference?
- Fields
- Data components and data views
- forms
- grids
- etc
- Connecting components to data - link out
- finding container (don't use parent because the useless parent field only shows the application)
- Components and layouts in the palette → Themes and palletes
- Responsive design - point to theme 2 pages (can these be generalised)
- Changing design - styles and shared styles.
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
See also:
- /wiki/spaces/HELP90/pages/2076246053
- Position, Size and Flow of Layout Components.
- Drag-and-Drop Techniques.
Parts of a screen
Top down screen structure
...
You can divide up a screen into multiple parts, called dashboard elements, using the Add options. In the repository, you can see the different elements listed under the dahboard.
Components and layouts
A component can be:
- an area, which acts as a container components
- elements of a screen, such as a header, body or footer
- the fields 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
- menus and buttons to help users navigate.
For every component you add, you need to give it a name and specify the formatting using the component properties, described below. It's a good idea to include a description too.
In the PhixFlow repository, there is a Layouts branch. Multiple components are nested to create the different areas of the screen. The order of the items reflects their position on the screen. This means you can rearrange components on the screen by dragging them around in the repository.
You can simplify the process of creating a screen by using the themes available for PhixFlow; see:
Alternatively, you can design your own components, then use them as templates. For example, you can set the style properties of a button once, and then copy the template button every time you need one in your application. Drag your template components from the repository Layout Templates section into a Palette. This means you can quickly drag-and-drop your pre-designed components into your screens, to quickly create forms with a consistent look and feel.
Container child
Screen structur
...