...
...
...
- 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
Dashboard
Creating Clear Spaces on a Screen - dashboard elements
8.3 or earlier: 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.
Areas
Areas are containers
- 8.3 or earlier: Area not bound to data (changing this time)
- card-area (container) - for cards
- form-area - not just for "forms". This area can be backed by data
8.3 or earlier
- Form backed by one stream only
- To show data from another stream
- Card-area (container) - as this can have its own data One card to show the attribute.
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.
| 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 a 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, one of the Theme 2.1 palettes has the 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.
...
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
Types of component
Connecting components to data → link
Data components are automatically backed by data.
You can start with data or a compoinent
Backed by
- a stream
- a view - s
- 8.3 or earlier - aa stream plus filters
- 9.0 onwards - a stream, attributes from related streams (see ERDS) plus filters etc.
Containers - can they nest???
...
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.
There are a number of ways of determining a component's container:
- todo - this only shows the application Open the details for the component; at the top of the details, the name of the container 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 container is, and indeed how other components on the form relate to this component
Moving a component to a new container
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 components from being dragged
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
How tos
Reminder of the training, specific techniques.
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 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:
...
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. | 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: |
|
|
|
|
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 text field for the header.
- Body, in the illustration, the body area is empty. This is where you can add data components, such as a grid displaying table data, or form fields. The body area has styling to control its size and the layout of its child components. It also has spacing around its edge.
- Footer, area which contains a set of buttons.
The application user will use the buttons to make changes to data will appear in the body.
- Header is an area which contains
Finding Layouts and Components
| Anchor | ||||
|---|---|---|---|---|
|
It can be very useful to find a layout, component or container. There are two ways to do this:
Using Layers
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 Layouts 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 | ||||||
|---|---|---|---|---|---|---|
|
| 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 has a package as its parent; see Package. |
Moving Components
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|