Image Removed

Overview

Overview

Screens enable users to interact with an application's data by creating, reading, updating and deleting records, such as viewing and adding, and its business logic, such as guiding users through a process. You can design simple data entry screens through to fully interactive systems , with navigation between multiple screens that display content dynamically based on the application user's activity.To ensure you have a consistent look-and-feel for your application, choose one of the templates that provides prebuilt screen parts (components or multi-component layouts), all of which are fully customisable. dynamically layouts. 

PhixFlow makes it easy to create great screens quickly and easily using template packages that include preconfigured items that can be customised and combined. Simply drag layouts, components or data tables onto the screen canvas to start designing your screen.

Screen Window Layout

When you are designing an application screen, the PhixFlow window has the following parts: 

Image RemovedImage Added

Opening and Creating Screens

• On your applications home page click the screen's tile.
  • Alternatively click

    Insert excerpt
    _screen _screen nopanel true

     from the header bar.

Image Added

• To create a new screen click the 

  Insert excerpt
  _add _add nopanel true

   button.
• To open an screen double-click it.

Palette

Palettes contains reusable templates for creating screens and their content. Palettes are typically included within the template package selected when the application was created, however they can also be created independently. See Using a Palette.

Customising Default Templates

You can make changes to the palettes, by adding components or removing them. You can also change the appearance of components in a palette, for example to use corporate colours. When making alterations we must consider:

1. Do we want this change to affect all existing instances of this template?
   1. For example, applying a corporate logo and colour scheme. 
2. Do we want this change to only affect future instances of this template?
   1. For example, altering the layout of a contact card without breaking any existing instances. 
3. Do we actually want a new template added to our palette?
   1. A new application is created with an amended colour scheme.

See Changing or Creating a Palette which explores these issues and provide solutions.

Components and Layouts

Components are the smallest basic building blocks of screen creation, typically they are combined together to create more complex items referred to as Layouts. You can create layouts yourself by combining components or you can use the template layouts from a palette (recommended). See Screen Structure.

Screen Structure

Screen structure defines how items appear on a screen, where new items should be placed and how the screen displays on different devices. The structure of any screen is displayed in the Layers section of the screen. Click on the image below to see an overview of a typical screen template provided by PhixFlow. See Screen Structure.Image Added

Directions/Flow

The direction items are laid out on a screen is control by the direction of flow. If you are familiar with CSS this is the Flexbox model. Where applicable palette items have a direction applied already and this is typically indicated in its name and/or by an arrow showing the direction of flow on its icon. 

The direction of flow is set in the styles tab of the item, as illustrated here on a tile container: 

Image Added

Styles

Styles affect the look and feel of a components and layouts on a screen, from simple colour changes to how a screen dynamically responds to user interactions. Styles can be applied in several places, and each has a different impact:

• Styles Settings - a set common formatting options for the component. This is object-level styling. It is useful to use this when you are experimenting with styles or you want to apply a one-off style. 
• Shared Styles (Recommended) - a style that can be applied to multiple components to give your application a consistent look and feel. To change an aspect of styling, you only need to make a in the shared style. All components that use the style are automatically updated when the style is updated. It is recommended that all styles be applied using a shared style where possible.
• CSS Properties - a set of specific styles, defined using a CSS tags and their associated values. This is object-level styling. It is useful if you have previous CSS knowledge.
• Formatting Rules - apply a shared style when the conditions of a rule are satisfied. Formatting Rules are applied at the object-level. See Applying Formatting Rules

See Screen Styling.

Moving Content

To move an item, in the layers section drag it onto another component and: 

• Moving an item into or out of a parent item: shift+drag and drop moves a component into the component on which you drop it. This creates a parent-child relationship.
• Moving an item next to another item: drag and drop places a component next to the component on which you drop. This creates a sibling relationship.
  • Note if you need to move the item out of one area and into another, you will need to hold shift. 

Data Bound Components

These are special components designed to display data:

• form: a container that you bind to a table. It is then easy to add fields and select the data you want it to display. Fields can display dynamic text depending on what the application user has selected.
• card: a container that displays an individual card for each record in its backing table. Each card can shows data using dynamic text or form fields; see Making a Card Container.
• grid: displays data in columns and rows. Each column corresponds to an attribute, for example, Name, Address, Phone number. Each row is a data record; see Creating a Grid.
• chart: displays data in a chart or graph or chart; see Creating Dashboards and Reports.

Adding Data to a Screen

Data is added to a screen by dragging a table onto it. This initiates the process of how to display the data and what data to display, for example as a grid, chart of form fields.

Image Added

Presenting Data

How data is presented, how is it filtered and sorted all depends on your objectives. The following are useful resources that will help guide you:

1. Designing Views and Reports: See Creating Dashboards and Reports.
2. Filtering and Sorting: See Filtering and Sorting Grids and Charts.

Locking and Unlocking

When a screen is 

• To 

  Insert excerpt
  _lock _lock nopanel true

   a screen
  • Click the 

    Insert excerpt
    _lock _lock nopanel true

     button on the toolbar. If this is not visible the screen is already locked.
• To

  Insert excerpt
  _unlock _unlock nopanel true

  a screen
  • If there is no toolbar visible this indicated a screen is locked.
  • Right-click on the canvas and select 

    Insert excerpt
    _unlock _unlock nopanel true

     from the popup menu. 

Actions

Actionflows control the interactions a user has with your application, such as saving input data or open a new screen. They can be applied to different types of screen item such as buttons and grids. See Understanding Actionflows.

Startup Actions

Startup actions are actionflows which run when your application opens. It can be used to open the default navigation menu and a specific screen such as a landing page.

1. From the screens home page in your application, right click on a screen and select Open Screen on Startup. 
   1. To remove a screen from the Startup action, right click on a screen and select Remove from the Application Startup Action.

See 17. Startup Actions.

Tabs for Screens

In the header menu there is a chevron which will show or hide tabs that allow you to switch between open Screens in your application.

This chevron option can be hidden, see Application properties → Basic Settings → Hide Window Tabs.

If you require these tabs to be visible by default see Application properties → Basic Settings → Display Window Tabs by Default.

Example Screens

The following screenshot shows the type of screen that you can create in PhixFlow. Everything you see is a prebuilt layout from palettes in the Theme 2.1 package. It is worth spending some time familiarising yourself with the palettes to see what is available. You should find that the palettes include everything you need. Later you can learn how to modify a layout or its styles, or even design your own from basic components.

You can find some example screens in the package associated with your application. Look in the repository → Packages, for example repository → Packages → Theme 2.1 → Screens. 

What's Next?

PhixFlow Fundamentals, this course provides a practical guide to using PhixFlow including the design and creation of screens in our applications.

Further Reading