Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 122 Next »



Screens Page Layout

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


  1. The toolbar provides screen-specific options, such as opening:
    • the palette, from which you can drag components
    • screen properties, where you can configure behaviour of the screen.
  2. The layouts panel, on the left. This shows a hierarchical list of the components on the screen, so that you can easily see parent/child relationships. Selecting an item on the canvas highlights it in the layouts panel, and selecting an item in the layouts panel highlights it on the canvas. You can also move components in the layouts panel.
  3. The canvas is where you add the different components of the screen by dragging them from the palette or repository.
  4. The right panel is where PhixFlow displays: 
     
    • the palette, which has pre-made 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, where you configure options related to the components in your screen; see Component properties.

As you select different items on the screen, PhixFlow opens there associated properties. You can  Pin a tab to keep it open.


Screens Overview

Screens (formerly known as Dashboards) allow you, and your users, to interact with the data in your application, performing actions such as creating, reading, updating and deleting records.

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.


Example Screen

This is an example that demonstrates the kind of screen that can be built using PhixFlow. All of what you see here is available from the Theme 2.1 palette as preconfigured layout templates. It is worth spending some time familiarising yourself with the palettes to see what is available. You can build your own layouts but it is recommended to begin with a template.

Example screens like this are provided in the template packages in the repository. For example. See the 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?


  • No labels