Versions Compared

Version Old Version 4 New Version Current
Changes made by

Anthony George

Zoe Baldwin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue


Creating Screens from the Home page

  1. From your applications application's Home page click Screens, click
    Insert excerpt
    _screen
    _screen
    nopaneltrue
    .
  2. A list of all the screens in your application will open.
  3. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     and enter the following details:
    1. the Name, Companies List.
    2. Leave Open Maximised ticked , leave this toggled on as we want our screen to use all available space.
    3. All users can View Data, leave this toggled on as we want our screen to be available to all users of our application.
      1. Note: If this is toggled off only selected user groups will be allowed to view the screen. See Managing User Groups and Privileges
    4. Description, set this to be, A complete list of all companies.
    5. Please select a Template, click on Tile with Buttons.
      1. There are  are a selection of templates to choose from, and we will explore these throughout the course. Hover over the templates to find out more about each oneRight-click on each one and select Display to see a preview of each template. The template we have selected here has the most options and will be useful for displaying and interacting with data. 
    6. Click Create Screen.
  4. The screen will be created and will automatically open. Note, this can take a little while as the html and css are generated for the screen.
Image Added

Before we begin adding data and editing the look and feel, we will first look at the structure of the screen. This is beneficial as this knowledge will make editing the screen easier to understand. 

Screen Structure

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layersby 

Insert excerpt
_layers
_layers
nopaneltrue
. Components are things like areas, static text labels and form fields, which display data from a table. Multi-component layouts can be simpleMultiple components are combined into layouts, such a as a label and a field, or more complex parts of a screen with responsive design , these are called tiles. 

Layers

A typical screen has a layered structure, in which one layer is the parents for another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to both desktop and mobile devices. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Image Removed

such as a card or tile. 

Components

Components are the most basic building blocks that are combined to design a screen. Components are available They are available from any palette.

Expand
titleBasic Components

The basic components are:

Containers

Component

Data Fields

Description

Text Fields

Examples

Data Components

Containers

Containers are designed to hold other components

  • area
  • form
  • card container
Data FieldsData fields are designed to display data from an
attribute.

Text fields are designed to be labels.

Data components may not be available on the palette. Instead, your application has default components that it uses when you drag a table or
attribute
onto the screen canvas
.
PhixFlow prompts you to choose a:
  • area
  • form
    • card container
    • true/false field
    • date field
    • date-time field
    • number field
    • string field
    • URL display
    • drop-down
    • fixed drop-down
    Text FieldsText fields are designed to be labels.
    • dynamic text: text varies depends on backing data.
    • static text: you specify the text you want to appear
    Data Components

    Data components may not be available on the palette. Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas.

    PhixFlow prompts you to choose one of the examples on the right.

    • grid
    • pie chart
    • line graph
    • horizontal bar graph
    • vertical bar graph
    • card


    Layouts

    Layouts are groups of preconfigured pre-configured components. You can create these yourself by combining components or you can use the layouts from a palette (recommended).

    Expand
    titleExample Layout

    For example, a simple layout for a tile is illustrated below:

    • Tile is an area
    container
    • with styling to control its size and the layout of its child components.
      • Header is an area which contains
      • an
    icon 
      • icon and a static
    text
      • text field for the header.
      • Body
    , in the illustration, the body area is empty. This is
      •  is where you can add
    data components
      • content, such as a grid displaying table data, or form fields. The body area has the styling to control its size and the layout of its child components. It also has spacing around its edge.
      • Footer
    ,
      •  is an area which contains a set of buttons.
     
      • The application user will use the buttons
    to make changes to data will appear in the body.Image Removed
      • to interact with the data, such as editing and deleting records.

    Image Added

    Layers

    A typical screen has a layered structure, in which one layer is the parent of another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to the screen of the device it is being viewed on. The nested structure for screens is illustrated below. Click on the image to make it larger: 

    Image Added

    Excerpt

    Understanding the Screen Menus

    The options for components on a screen can be found by:

    • Clicking on the component to display the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nopaneltrue
       on the right, including the 
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
       
      • The properties show for the component outlined in blue on the canvas
      • When a component is inside another component, click until the desired component outlines in blue

    Image Added

    • (Available in PhixFlow version 11+) Hovering over the component on the screen to display the 
      Insert excerpt
      _pen_floating
      _pen_floating
      namepink
      nopaneltrue
       icon, which turns blue when clicked, 
      Insert excerpt
      _pen_floating
      _pen_floating
      nameblue
      nopaneltrue
      , and displays the floating menu
      • The floating menu can also be accessed in the 
        Insert excerpt
        _layers
        _layers
        nopaneltrue

    Image Added

    • Right-clicking on a component to display options such as adding and changing a backing attribute, and changing the template
      • The right-click menu can also be accessed in the 
        Insert excerpt
        _layers
        _layers
        nopaneltrue

    Image Added

    Floating Menu (Available in PhixFlow version 11+) 

    The interactive floating menu appears on components on mouseover. It is available on screens when

    Insert excerpt
    _unlock
    _unlock
    nopaneltrue
    ed in
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
     and provides quick access to key tasks, including accessing styles, field validation and defining backing data. 

    The options available on the floating menu change depending on the type of object, but will always show the most commonly used properties, such as

    Insert excerpt
    _lock
    _lock
    nopaneltrue
    /
    Insert excerpt
    _unlock
    _unlock
    nopaneltrue
    . 

    Image Added

    Right-Click Menu

    The right-click menu contain global options, such as 

    Insert excerpt
    _element_show
    _element_show
    nopaneltrue
    , and options relevant to the component.

    Image Added