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.

Screen Window Layout

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

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

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. 

Useful Terms

• Screen: the empty container with associated properties; see Designing Screens
• 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; see /wiki/spaces/HELP91/pages/9050667224.
  • 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 /wiki/spaces/HELP91/pages/9050667148.
  • 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 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 actionsflows; see Understanding Actionflows.  Applications users click buttons:
  • to make changes to data, such as saving an updated 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 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?