Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 36 Next »

This page explains how to open a screen or create a new one, as well as how to add components to a screen.

Select an Existing Screen

  1. From the application Home window, select Design Screens.

  2. Select one of the listed screens.

PhixFlow opens the screen canvas on the left and the palette on the right.

Create a New Screen

If 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:

Error rendering macro 'excerpt-include' : No link could be created for '_home_screen'.

Sections on this page

  1. Click  Create New Create New to create a new screen.
  2. Select a screen template. This will give you pre-set layouts such as: 
    • desktop or mobile dimensions
    • full screen or pop-up
    • a data grid or form.
  3. PhixFlow prompts you to:
    • Enter the name and description for the screen.
    • Select whether or not the screen will Open Maximised.
      When you select this option, the screen will open "full screen" for the application user.
      Otherwise, PhixFlow assumes the screen will be a pop-up window. It automatically selects the following options: This need to be updated with the logic from flow: 5.5 if you want to include this level of detail here.
      • Always on top
      • Allow user to resize
  4. Click Confirm.
  5. PhixFlow opens a new screen canvas on the left and the palette on the right.

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 when designing a screen.

  • 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 Using Layers, below.
  • On the right is the palette. Drag components from the palette onto the canvas. Do we want to talk about preferred parent here?
  • 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  Design Mode
  • when you switch between  Design Mode and  Application Mode.

To unlock the canvas, right-click on the canvas and select

Error rendering macro 'excerpt-include' : No link could be created for '_layout_unlock'.
. This can also be done from the context toolbar see flow 3.4  When the screen is locked the toolbar has different options enabled.


Using the Palette

Check the flow 5.8

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 Forms - drag in a single tile that has all the components to create a full screen. Should we calls these complete screens?
  • Form Elements - drag in several tiles to design your own screen. Each tile has layers of components, such as an area with headers, fields and labels. Form elements is not limited to tiles.

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. You can:

  1. Select the attributes you want to appear in a form. How?
  2. Drag the attributes onto the parent container.
  3. Let PhixFlow create default form fields in which to display data records.

For how to do this, see Showing Data on a Screen. if is is covered else where why duplicate it here in part?

If you have already created fields fields should this be form 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 "bits" or components you need to build a screen.

The easiest way to move components around is in the layers panel, rather than in the screen itself. Not sure this is true if we get the preferred parent. When you are dragging things around in the screen, PhixFlow may not know if you want to drop a component: feels like an issue with our system that perhaps shouldn't be highlighted. can we positively spin this? e.g. for more precision use the layers option

  • into another component, creating a parent-child relationship 
  • next to another component, creating a sibling relationship.

If instead you drag a component in the list of layers, you can be specific about how the component relates to other components on the screen.  

If you are using PhixFlow's palette, most components will flow into the space that is available to them. flow is a little vague and would not be clear for a new user, are we talking about sizing here? see Using Size and Position for Responsive Design.


Screen Design and Layers :

A typical screen has a nested structure, in which the main areas are the parents for other components. This is illustrated below: I would state that this is to create a responsive design that will look as good on a desktop as it would on a mobile device.

Another way to show these layers is as a heirarchy. For example:
Screen
Controls area
Menu 1
Menu 2
Main area
Header
Tile container area
Sub-header
Tile Body
Area 1
Grid
Area 2
Form
Button Bar
Footer area
Button 1
Button 2

To show the parent/child hierarchy for a screen, click  Show/Hide Layer Panel. There is an example on the right.

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. 

Layout components have a Postion Settings → Prevent Dragging option so that once something is set up you don't accidentally change it's size or drag it out of position on screen. You can rearrange it via the layers list. We haven't mentioned the option for that stops dragging being permitted?

See Also


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

DRAFTING

To test, clcik   Application Modeso you can interact with the screen as if you are an application user.


Design mode is pretty wisiwig but it does not behave how the screen will behave for an app user. 

Remember you can switch to app mode to do this.

  • No labels