5. Creating a Screen

Owned by Anthony George
Last updated: Feb 07, 2023
3 min read


Creating Screens from the Home page

  1. From your application's Home page click screen Screen.
  2. A list of all the screens in your application will open.
  3. Click  Add New and enter the following details:
    1. Name, Companies List.
    2. Open Maximised, leave this ticked as we want our screen to use all available space.
    3. Description, set this to be, A complete list of all companies.
    4. Please select a Template, click on Tile with Buttons.
      1. There 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 one. The template we have selected here has the most options and will be useful for displaying and interacting with data. 
    5. 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.


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 by layers. Components are things like areas, static text labels and form fields, which display data from a table. Multiple components are combined into layouts, such as a label and a field, or more complex parts of a screen with responsive design such as a card or tile. 

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: 

Components

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

 Basic Components

The basic components are:

Containers

Data Fields

Text Fields

Data Components

Containers are designed to hold other components

Data 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
  • dynamic text: text varies depends on backing data.
  • static text: you specify the text you want to appear
  • grid
  • pie chart
  • line graph
  • horizontal bar graph
  • vertical bar graph
  • card

Layouts

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

 Example Layout

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

  • Tile is an area with styling to control its size and the layout of its child components.
    • Header is an area which contains an icon and a static text field for the header.
    • Body, in the illustration, the body area is empty. This is where you can add 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, an area which contains a set of buttons. The application user will use the buttons to interact with the data such as editing and deleting records.