Overview

Screens allow users to interact with an application, such as viewing data or being guided through a process. They can be anything from simple data entry forms, through to fully interactive screens with dynamic layouts. PhixFlow makes it quick and easy to create screens by providing a palette of preconfigured items, that can be customised and combined to create the screen you need. Simply drag palette items or data tables onto the screen canvas to start creating a screen.

Screen Window Layout

Expand
title More Detail
Toolbar: Provides screen-specific options, for example, quick access to lists of items that you want to drag onto the screen. Tip If the toolbar is not visible, this is because the screen is  Insert excerpt _lock _lock nopanel true ed. To unlock it, right-click on your screen and select  Insert excerpt _unlock _unlock nopanel true .  Layers: This panel, on the left, shows a hierarchical list of the components on the screen, including the parent/child relationships. Selecting an item on the canvas highlights it in the layers panel, and selecting an item in the layers panel highlights it on the canvas. You can also move components in the layers panel.  Screen Canvas: This is where you add the different parts of a screen by dragging them from the palette or repository. These parts can be basic components or multi-component layouts.  It is easy to add data to a screen by dragging a table onto the canvas, then selecting how you want to display it, for example as a form, grid or card.  Repository/Palette: This panel, on the right, is where you can see:  the palette, which has prebuilt components from full screens down to individual fields, that you can drag onto the screen canvas; see Using a Palette the repository, which lists all of the items available to you; see Using the Repository properties for components, which is where you can configure options related to how the component appears or behaves; see Component. The properties are opened by clicking different items on the screen. To keep the properties panel open, click  Insert excerpt _pin _pin nopanel true .

Opening and Creating Screens

• On your application's home page, click the Screen tile.
  • Alternatively, click

    Insert excerpt
    _screen _screen nopanel true

     from the header bar.

• To create a new screen click the 

  Insert excerpt
  _add _add nopanel true

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

Palette

Insert excerpt
_palette_icon_only _palette_icon_only nopanel true

Palette

s contains Palettes contain templates (reusable Components and Layouts) for creating screens. PhixFlow provides a template package called Serene Grey, which contains a complete palette containing all you need to create your screens. Alternatively, custom palettes can be createcreated. See Using a Palette and Changing or Creating a Palette

Customising Default Templates

You can customise a palette by adding new components and changing the appearance of existing templates, for example, to use corporate colours. When making customisations we must , consider:

1. Do we want Should this change to affect all existing instances of this template?
   1. For example, applying a corporate logo and colour scheme. 
2. Do we want Should 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

Insert excerpt
_components _components nopanel true

 are the smallest basic building blocks of a screen. Components can be found in the Basic Layouts section of a the PhixFlow  

Insert excerpt
_palette _palette nopanel true

. These can be added to a screen by dragging them onto the canvas. 

Typically, components are combined together to create more complex items referred to as Layouts. You can create your own layouts or you can use the template layouts from a palette (recommended) which can be found in any of the palette sections. See 5. Adding Content to a Screen.

Screen Structure

Screen structure defines how items are laid out on a screen, where they are placed and how the screen displays on different devices. The structure of any screen is displayed in the  

Insert excerpt
_layers _layers nopanel true

 section of the screen panel. Click on the image below to see an overview of a typical screen template provided by PhixFlow. See Screen Structure.

Image Modified

Sizing and Position

Setting the size and position of content on a screen is key to producing a great screen. When designing a screen we must consider how we want it to respond to the device it is being viewed on and the content it is displaying:

1. Do we want items to a fixed size? 
2. Do we want our content to expand to take the space available on a screen?
3. Do we want the items on the screen to expand to the size of their content?

This topic is explored in Sizing and Positioning Screen Content.

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. For example, the Button- Column tile, adds content in a vertical column: 

 

The direction of flow is set in the

Insert excerpt
_stylesproperty_ccstabs _styles_ccsproperty_tabs name Style nopanel true

 tab of  of the item, as illustrated here on a tile container: 

Styles

Insert excerpt_styles_ccs_styles_ccsnopaneltrue affect the look and feel of a components and layouts Styles affect the look and feel of 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

• Shared 

  Insert excerpt
  _styles_ccs _styles_ccs nopanel true

   (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 change 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 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
• 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 RulesStyle Settings - apply a shared style when the conditions of a rule are satisfied. Formatting Rules are applied at the object-level. See Applying Formatting Rulesset 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. 

See Screen Styling.

Moving Content

To move Move an item , in the layers section drag by dragging 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

in the Layers section. This will place the component next to the component on which you dropped onto, creating a sibling relationship.

Note if you need to move the item

To move a component into another component, or out of one

area

component and into another

, you will need to hold shift. 

component, creating parent-child relationship, hold shift while dragging and dropping.

Expand
title Watch Video
Iframe src https://youtube.com/embed/dNDLBy2vXWw?&rel=0&ytp-pause-overlay=&list=PLbPt6SI1Zhb8aOP-qz-KzSlB-VncvcIX- width 680px height 400px

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.

Presenting Data

How data is presented, how it is filtered and sorted all depends on your objectives. The following are useful resources that will help guide you thought in setting up different types of views, such as grids and charts:

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 

Insert excerpt
_lock _lock nopanel true

ed, clicking on it allows the user to interact with it, where as whereas an

Insert excerpt
_unlock _unlock nopanel true

ed screen allows you to edit it. Locking and unlocking is only applicable in 

Insert excerpt
_design_mode _design_mode nopanel true

.

• To 

  Insert excerpt
  _lock _lock nopanel true

   a screenClick , 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, right-click on the canvas and select 

Insert excerpt
_unlock _unlock nopanel true

 from the popup menu. 
• If there is no toolbar visible this indicates a screen is locked.

Actionflows

Insert excerpt
_action_actionflow _action_actionflow nopanel true

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

Startup Actions

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

1. From the screens Screens home page, 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 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 screens in your application. This is available in both design Design and app App mode.

1. Hide: This chevron option Tabs can be hidden by default, see Application properties → Basic Settings → Hide Window Tabs.
2. Display: If you require these tabs Tabs to be visible by default, see Application properties → Basic Settings → Display Window Tabs by Default.

Example Screen

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 the Serene Grey 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 → Serene Grey → Screens. 

Glossary

Expand
title Glossary of Key Terms
Screen: the empty container with associated properties; see Creating a Screen. Element (optional): you can divide a screen so that you can bind different data to the components in different parts of the screen; see Splitting a Screen. Components: the smallest building blocks of a screen, such as an empty container area or a data field. Components have style properties to determine their appearance; see Screen Styling and Formatting and Styling Grids and Charts. Layouts: combinations of multiple components. To create a layout, start with an outer area which is a container for the other components. For example, a layout for a data-entry form has an area that contains:   a text header, data fields grouped with their labels, and a footer with action buttons.  Data-bound Components: special components designed to display data in a: 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. 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 the see Creating Dashboards and Reports topic. Views: provide control over the data you show. Choose attributes from one or more tables, then filter and sort the records. Data-bound components are bound to a view, which is also called the backing view. Buttons: are a component designed to be wired to actionsflows; , see Understanding Actionflows.  Applications   Application users click buttons: to make changes to data, such as saving an updated record record. to navigate in the application, such as opening a different screen. Palettes: all the prebuilt tiles, layouts and components available to design your screen. There are several different palettes; , see Using a Palette. Properties: a pane panel showing all the options you can configure for a component, or any PhixFlow item. Click a component on the screen to open its properties in the panel to the right of the canvas.

What's Next?

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

Already started PhixFlow Fundamentals?

Return to Screens Fundamentals

Further Reading

Child pages (Children Display)
depth 1