| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
Screens allow users to interact with
an application,
PhixFlow provides a complete suite of tools that utilise drag and drop for building beautiful screens quickly and easily, from simple data entry screens to fully interactive screens which display content dynamically based on the users activity. To help supercharge the screen building process templates are available, in a number of different styles, giving you instant access to a host of prebuilt screens and components, all of which are fully customisable.
Screens Page Layout
You are here. Here is a simplified view of the screen page.
- The toolbar provides screen specific options, such as listing your available tables which can then be dragged onto the canvas to build a view and displaying the screen properties to you can edit its options.
- The canvas area where the screen will be configured. Items can be added by dragged items onto this area from the palette or repository.
- The palette is displayed to the right of the canvas and provides all the building blocks you need to create fantastic screens. The palette can be opened using the toolbar.
Example Page
Here is an example that demonstrates the kind of screen that can be built using PhixFlow. All of what you see is available from the palette and example screens like this are provided in the template packages in the repository. For example. See the Repository → Packages → Theme 2.1 → Dashboards
Create a Complete Screen Show Here we have an example screen that displays the employee details of a company. Many of the elements that make up a screen are preconfigured components that are available from the palette on the right-hand side. It is worth spending some time familiarising yourself with the palette to see what is available. Example screens are provided in the theme package that illustrate what is available, everything on these screens is made using palette items.
There are several stages to designing an application, as outlined in Building Applications. An application provides users with one or more screens, which they use to interact with data.
A screen is made up of:
- a dashboard: the empty screen and properties that you want to apply to the whole screen
- optionally, dashboard elements: these divide a dashboard and enable components in different parts of it to be bound to different data
- layouts: combinations of components, such as areas, fields, labels, cards, grids and charts, grouped together to create parts of the screen. Layouts start with container components:
- areas: can contain any other component
- forms: designed to contain fields and their labels
- card-containers: designed to contain cards
- data-bound components: some components are designed to display data. These are:
- graphs, charts and grids, which are based on views. These components display stream-items:
- either individually, for example in a grid
- or combined into a chart or graph
- form fields and cards: show several data points (attributes) for a selected stream-item:
- either in the fields on a form
- or in a card.
- graphs, charts and grids, which are based on views. These components display stream-items:
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 | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
|
Opening and Creating Screens
- On your application's home page, click the Screen tile.
- Alternatively, click
from the header bar.Insert excerpt _screen _screen nopanel true
- Alternatively, click
- To create a new screen, click the
button.Insert excerpt _add_screen _add_screen nopanel true - To open an screen, double-click it.
Insert excerpt _palette_icon_only _palette_icon_only nopanel true
Palette
| _palette_icon_only | |
| _palette_icon_only | |
| nopanel | true |
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 created. See Using a Palette and Changing or Creating a Palette.
To open the palette, click
on the toolbar. Insert excerpt _palette _palette nopanel true
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, consider:
- Should this change affect all existing instances of this template?
- For example, applying a corporate logo and colour scheme using a shared style.
- Should this change only affect future instances of this template?
- For example, altering the layout of a contact card without breaking any existing instances.
- Do we want an entirely new template added to our palette?
- For example, a new template with an amended colour scheme.
See Changing or Creating a Palette which explores these issues and provide solutions.
| Warning |
|---|
If you change the templates that were imported via a package, re-importing the package will overwrite your local changes. |
Screen Position
You can position your screen so that it is Floating, or Pinned (to the top, bottom, left or right of your window). For example, you may want to fix your screen to the top of the window to make it the main menu of an application. If you choose to pin your screen to the top or bottom, a height can also be set. If pinning to the left or right, a width can be set. If you choose a floating position, then a width, height, etc. can be set.
This is set by clicking
on the toolbar, then click the Insert excerpt _property_settings _property_settings nopanel true
.Insert excerpt _property_tabs _property_tabs name Style nopanel true
Components and Layouts
are the smallest basic building blocks of a screen. Components can be found in the Basic Layouts section of the PhixFlow Insert excerpt _components _components nopanel true
. These can be added to a screen by dragging them onto the canvas. Insert excerpt _palette _palette nopanel true
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.
Insert excerpt 4. Creating a Screen 4. Creating a Screen nopanel true
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
panel. Click on the image below to see an overview of a typical screen template provided by PhixFlow. See Screen Structure.Insert excerpt _layers _layers nopanel true
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:
- Do we want items to be a fixed size?
- Do we want our content to expand to take the space available on a screen?
- Do we want the items on the screen to expand to the size of their content?
- Do we want our screen fixed to the top or edge to make it the main menu of an application?
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 | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Styles
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:
- Shared
(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 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.Insert excerpt _styles_ccs _styles_ccs nopanel true - Style Settings - set common formatting options for the component. This is component-level styling. It is useful to use this when you are experimenting with styles or you want to apply a one-off style.
- CSS Properties - a set of specific styles, defined using CSS tags and their associated values. This is component-level styling. This is more advanced styling and 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 component-level. See Applying Formatting Rules
See Screen Styling.
Moving Content
Move an item by dragging it onto another component in the Layers section. This will place the component next to the component on which you dropped onto, creating a sibling relationship.
To move a component into another component, or out of one component and into another component, creating parent-child relationship, hold shift while dragging and dropping.
| Expand | ||||
|---|---|---|---|---|
| ||||
|
|
|
|
In this video we provide you with a short introduction to creating your first screen.
| Tip |
|---|
Binding data to components on a screen requires streams, stream-items and attributes to be present; see the Entity Relationship Diagrams and Views Setup topic for details. |
You can build up your own layouts from individual components. However, we recommend that you simply use ready-made layouts that you can drag from the palette onto a screen. Some layouts, called tiles, are specifically designed to resize and move components in response to changes in screen size and device form; see /wiki/spaces/HELP100/pages/9106726483.
Some layouts or components are designed for user interaction, such as buttons. However, you can configure events, such as user-clicks on part of a screen, to trigger actions. For information about configuring user interaction for screens, see Actionflows and Action Configuration.
This topic explains how to:
- create screens; see Creating or Opening a Screen
- design screens using components provided in the palette; see Understanding Palettes and Themes
- use data to create components or bind data to existing components; see Showing Data on a Screen
- change the styling of components; see Styles and Formats
- provide menu options and navigation; see Adding a Menu Bar and Data Views - Toolbars and Menus.
Pages in this Topic
| borderColor | #00374F |
|---|---|
| titleColor | white |
| titleBGColor | #00374F |
| borderStyle | solid |
| title | Other pages in this topic |
Data Bound Components
These are special components designed to display data:
- form: a container bound to a table. Add fields and select the data you want to display. Fields can display dynamic text depending on what the application user has selected.
- if a form does not have a backing table set, the
icon will show in theInsert excerpt _add_backing_table _add_backing_table name icon nopanel true
(PhixFlow version 11.1.1+)Insert excerpt _layers _layers nopanel true 
- if a form does not have a backing table set, the
- card: a container that displays an individual card for each record in its backing table. Each card can show 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, see Creating Dashboards and Reports.
Adding Data to a Screen
Data is added to a screen by dragging a table or table attributes onto it. This initiates the process of how to display the data and what data to display, for example as a grid, chart or form fields.
Presenting Data
How data is presented, filtered and sorted depends on your objectives. The following are useful resources that will help guide you in setting up different types of views, such as grids and charts:
- Designing Views and Reports: See Creating Dashboards and Reports.
- Filtering and Sorting: See Filtering and Sorting Grids and Charts.
Locking and Unlocking
When a screen is
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
- To
a screen, click theInsert excerpt _lock _lock nopanel true
button on the toolbar.Insert excerpt _lock _lock nopanel true - If this is not visible the screen is already locked.
- To
a screen, right-click on the canvas and selectInsert excerpt _unlock _unlock nopanel true
from the popup menu.Insert excerpt _unlock _unlock nopanel true - If there is no toolbar visible this indicates a screen is locked.
Actionflows
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.Insert excerpt _action_actionflow _action_actionflow nopanel true
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.
- From the Screens home page, right-click on a screen and select Open Screen on Startup.
- 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 in your application. This is available in both Design and App mode.
- Hide: Tabs can be hidden by default, see Application properties → Basic Settings → Hide Window Tabs.
- Display: 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 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 | ||
|---|---|---|
| ||
|
What's Next?
The PhixFlow Fundamentals 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) | ||
|---|---|---|
|