Todo-Anthony - check all screenshots are consistent with implementation - they were taken from Adobe. Check if layers panel is present. Check the palette section relative to theme 2.1.
This page explains how to open a screen or create a new one, as well as how to add components to a screen.
Create a New Screen
- In the repository, expand your application's Dashboards section.
- Click
. PhixFlow opens the properties for a new dashboard.Insert excerpt _add _add nopanel true - Enter a name for the dashboard.
- Specify whether or not the screen should open full screen or as a pop-up window.
- Pop-up properties:
- untick Open Maximised (default)
- tick Always on top
- tick Allow user to resize
- Full-screen properties
- untick Open Maximised
- untick Always On Top
- optionally, untick Allow user to resize
- Pop-up properties:
- We recommend you add description for the screen.
Scroll down the properties and expand the Description section. - In the properties toolbar, click
.Insert excerpt _finish _finish nopanel true - PhixFlow opens a new, unlocked, dashboard canvas on the left.
- In the toolbar (or in the pop-up menu), click
to display the palette on the right.Insert excerpt _palette _palette nopanel true - To add components to the screen, drag them into the canvas from the palette.
The Screen Canvas and Options
PhixFlow has several areas of the screen with features to help you.
- The central area is the canvas where you design your screen.
- Along the top of the canvas is the toolbar
- On the left is the layers panel, which shows how the components are nested; see Screen Design and Layers, below.
- On the right is the palette. Drag components from the palette onto the canvas.
- Above the toolbar, you can find quick access to lists of:
- other palettes
- component categories
- templates: components that can be added to a palette
- styles
- menus
- images.
Unlock a Screen Canvas
To prevent accidental editing of a screen, PhixFlow opens an existing screen with the canvas locked:
- when you first open an existing screen in
Insert excerpt _design_mode _design_mode nopanel true - when you switch between
andInsert excerpt _design_mode _design_mode nopanel true
.Insert excerpt _app_mode _app_mode nopanel true
To unlock the canvas, right-click on the canvas and select
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Using the Palette
The way a screen is made up of layered components is reflected in the way components are grouped in the palette. At the top level are the pre-built items, such as:
- Complete Screens- drag in a single tile that has all the components to create a full screen.
- Form Elements - drag in several components or tiles to design your own screen. These have layers of components, such as an area with headers, fields and labels.
If you want more control over the design of your screen, use partially prepared components:
- Tile containers - drag these in to be the containers. Containers create distinct areas on the screen, with padding and margins so that child items can be automatically positioned.
- Tiles - drag in composite components called tiles.
If you want to go right back to the basic screen components and fields, use the last 2 palettes.
- Base Components - build up the different things you want on the screen from the base up.
- Data Components - add components designed to display data.
Creating Forms Easily
If your screen is going to be a form to display individual data records for a user to edit, it's easier to start with the data rather than creating lots of individual fields. The page see Showing Data on a Screen explains how to:
- Select the attributes you want to appear in a form.
- Drag the attributes onto the parent container.
- Let PhixFlow create default form fields in which to display data records.
If you have already created form fields fields, they are displayed with a broken link icon. Drag on attributes to bind them to the field.
For your selected template, PhixFlow displays a palette. This has all the components you need to build a screen.
| Tip |
|---|
The easiest way to move components around is in the layers panel, rather than in the screen itself. This means In the layers panel you can drag a component:
|
Screen Design and Layers :
| Anchor | ||||
|---|---|---|---|---|
|
A typical screen has a nested structure, in which the
To show the parent/child hierarchy for a screen, click
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
You can
- Select something on your screen to see it/them highlighted in the layers list.
- Selected items outlined in blue
- Parent item outlined in orange.
- In the layers panel, drag components around to change their position on the screen.
See Also
- Drag-and-Drop Techniques
- Dashboard properties
- Understanding Palettes and Themes
- Styles and Formats
- Showing Data on a Screen
Where Can I Drop This?
Whenever you start to drag a component from the palette, or an attribute, PhixFlow highlights the area onto which you can drop something using light blue, as shown below.
Testing Screens
To test an application screen, click
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| HTML Comment | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||
Features to be implemented: Select an Existing Screen
PhixFlow opens the screen canvas on the left and the palette on the right.
Create a New ScreenIf you have defined your data in an ERD, you can create a screen and its components based on that data; see Create a Screen From ERD Data. To create the screen first:
To add components to the screen, drag them into the canvas from the palette. The Screen Canvas and OptionsPhixFlow has several areas of the screen with features to help you. -Screenshot-
Unlock a Screen CanvasTo prevent accidental editing of a screen, PhixFlow opens an existing screen with the canvas locked:
To unlock the canvas, right-click on the canvas and select
|