Overview

PhixFlow provides a complete suite of tools to make it easy to create beautiful applications quickly and easily. A PhixFlow application is comprised of screens (previously called dashboards) that enable application users to interact with data by creating, reading, updating and deleting records. 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. Simply drag layouts, components or data tables onto the screen canvas to start designing your screen.

Screens Page Layout

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

1. The toolbar provides options that are specific to creating screens, for example quick access to lists of items that you want to drag into the screen.
   

   If you don't see the toolbar, it is because PhixFlow locks a screen to prevent you accidentally dragging components out of their place. To unlock it, right-click on your screen canvas and select 

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

   . 

   
   

2. The layers panel, on the left, shows a hierarchical list of the components on the screen. You can easily see parent/child relationships for components in the layers panel. 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. 
3. The canvas 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 bind data to a component by dragging the data onto the screen then selecting how you want to display it, for example as a form, a grid or a card. 
4. The right panel is where PhixFlow displays: 
   
   • 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 the items available to you; see Using the Repository
   • properties for components. As you select different items on the screen, PhixFlow opens their associated properties. You can  Pin a property pane to keep it open. In the properties, you configure options related to to how the component appears or behaves on your screen; see Component properties.
     

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 → Dashboards. 

Useful Terms

• Screen: the empty container with associated properties.
• Elements (optional): these divide a screen and enable components in different parts of it to be bound to different data.
• Components: the smallest building blocks of a screen, such as an area or text.
• Layouts: combinations of components, such as areas, fields, labels, static text, combined with their styling, which are grouped together to create parts of the screen. To create a layout, start with an outer area which then contains other components. There are some special containers, such as:
  • a form which is designed to contain data fields
  • a card container, which is designed to display data on a card.
• Data-bound Components display data from tables. These are:
  • forms: an area that is bound to a table. Add fields to display data or add dynamic text; see /wiki/spaces/HELP100/pages/9106737297
  • grids: 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
  • charts: displays data in a chart or graph or chart; see the Creating Dashboards and Reports topic.
  • cards, a component which displays an individual card for each of the records from a table it is bound to. Each card can then display data using dynamic text or form fields.
• Buttons, are designed to handle user interactions to trigger actions, such as saving a record or opening a different screen. For information about configuring user interaction for screens, see Understanding Actionflows.
• Properties, a pane that opens to the right of the canvas and provides access to the configurable options the selected item.
• Palette, contains the items necessary to create the content of your screen.
  
  

What's Next?