3. Screens Fundamentals

Owned by Anthony George
Last updated: Jan 04, 2024 by Zoe Baldwin
6 min read

Introduction

Welcome to Screens Fundamentals. In this chapter, we will learn about all the key techniques and principles for creating screens in our application.

Concepts

To find out more about the key concepts for designing and creating screens before you take the course below, or simply to refresh your memory, see Designing Screens.

Video Demonstration 

Watch the video demonstration, then complete the Fundamentals Tasks below.



Fundamentals Tasks

Complete the tasks below, before moving to the next chapter. 

Task 1: Create your First Screen from an ERD

  1. Open your  ERD and on the Companies table, click 
  2. Choose screen Create Screen
  3. In the Create Screen pop up box:
    1. Enter the name Companies List for your new screen 
    2. Leave Open Maximised toggled on - this allows the screen to take up all of the available space 
    3. Leave All Users can View Data toggled on - this allows all of your app users to view your screen
    4. Enter a short Description (optional)
    5. Choose Tile with Buttons from the  Templates,  - this template already contains the buttons for add, edit and delete, and can be edited to suit
    6. Click Create Screen
  4. On the Available Attributes selector, select all of the attributes by clicking the top tick box, then deselect the attributes, Status, UpdatedTime and UpdatedByName
  5. Click and drag the  Attributes onto the screen
    1. Note: The Available Attributes selector will stay open until closed
  6. A pop up box will show asking how the attributes should be displayed - select  Grid

  7. A further pop box will shows asking if you would like to create an associated edit screen - select Yes

Task 2: Configure the Input Screen 

  1. On the Grid Actions wizard, select the  to create a new edit screen

  2. In the Create Screen for Edit form pop up box:

    1. Enter the name Companies Form for your new screen 
    2. Toggle off Open Maximised 
    3. Leave All Users can View Data toggled on 
    4. Enter a short Description (optional)
    5. Choose the Template, Edit Form
    6. Click Create Screen 
  3. Back on the Grid Actions wizard, set up the Preconfigured Actions as follows:
    1. Drag Open Screen to ADD new records onto the Add button under your grid
    2. Drag Open Screen to EDIT selected records:
      1. onto the Edit button under your grid
      2. onto the grid - this allows users to edit a record using a double click
    3. Drag Delete selected records onto the Delete button under your grid
  4. Close the Grid Actions wizard and Available Attributes selector

Task 3: Configure the Edit Form

  1.  Lock the Companies List screen
  2. Select any record on the grid and click the Edit button
  3. The Edit Form screen you created in Task 2 will open
  4.  Unlock this screen by right-clicking and pressing  Unlock
  5. As PhixFlow knows this screen is backed by the Companies table, click on the  Attributes button in the toolbar
  6. From the Available Attributes selector, select all of the attributes by clicking the top tick box, then deselect the attributes, CompanyID, Status, UpdatedTime and UpdatedByName
    1.  Why are these attributes deselected?

      CompanyID is deselected because it already exists on the form, as a  Hidden field. You can see this by looking in the  Layers. This hidden field was created automatically by PhixFlow when the input form was first created, and can be used in Actionflows and Background Filters.

      Status, UpdatedTime and UpdatedByName are deselected because they are not needed on the input form. Users will not need to add or modify these fields. Although, they can be added at a later stage, if required.

  7. Click and drag the attributes onto the Companies Form screen
  8. A pop up box will show asking how the attributes should be displayed - select  Field
  9. A further pop box will show asking if you would like to create Save and Delete actions - select Yes
  10. On the Form Actions wizard, set up the Preconfigured Actions as follows:
    1. Drag Save Record onto the Save button on the footer of your Companies Form screen
    2. Drag Delete Record onto the Delete button 
  11. Close the Form Actions wizard and Available Attributes selector
  12. Reorder the fields either by:
    1. clicking on the field and drag it to the desired location
    2. clicking on the attribute name in the  Layers and drag it to the desired location
  13. Change the template of the Web field by right-clicking on the field and selecting  Change Template
  14. On the  Select Template window, choose the  URL option in the Form Field Templates section, and click Select Template

Task 4: Add Validation

  1. Set any validation, such as mandatory fields or restricting certain fields to specific characters, by selecting the Company Name field twice to ensure the inner field is selected - to check the inner field has been selected, the  Properties window on the right should show CompanyName String Field at the top
  2. On the  Properties, scroll down the section, Validation
    1.  Tick the Mandatory box (to override the inherited setting) and toggle it on 
    2.  Tick the Validation Type box and choose Alpha Numerics - Extended from the drop down
    3.  Apply the changes

Task 5: Setup Header and Screen Position

  1. Click on the header, Header 1 Dynamic, and in the  Properties on the right, change the Default Value to Company Details 
  2.  Apply the changes
  3. To see this change, close and reopen the Companies Form screen 
    1. To reopen the screen, double click any record in the grid on the Companies List screen
  4.  Unlock the Companies Form screen
  5. To change the positioning of the screen, select  Properties in the toolbar
  6. On the  Styles tab, make the following changes:
    1. Width = 400
    2. Height = 100%
    3. Top = 0
    4. Right = 0
  7.  Apply the changes and close the Companies Form screen
    1. Close and reopen the screen if the changes do not show

What do these values mean?

The values for Width and Height define that the width of the screen should be 400px and the height should take up 100% of the available space - this will be responsive to the screen size of the user.

The values of 0 for Top and Left define the distance from these elements, e.g. the screen will be 0px from the top and left.

Task 6: Add Tiles to the Screen

  1. On the Companies List screen,  Unlock the screen
  2. Open the  Palette using the option in the toolbar
  3. Expand the Tiles - Additional section, and drag the Double - Row tile onto the grid

Task 7: Add a Contacts Card

  1. Click on the  Palette tab and expand the Card Containers section
  2. Click and drag the Contacts card container onto the top tile
    1. Enter the Name, Employees
  3. Click on the Employees card container to open its  Properties tab on the right
  4. Within the Basic Settings, click the drop down under Table
    1. Choose the Employees table
    2.  Apply the changes
  5. On the Employees Card Container, right-click on First Name and select  Add Backing Attribute
    1. In the Available Attributes selector, tick first_name and click Add
  6. On the Employees Card Container, right-click on Last Name and select  Add Backing Attribute
    1. In the Available Attributes selector, tick last_name and click Add
  7. On the Employees Card Container, right-click on Role and select  Add Backing Attribute
    1. In the Available Attributes selector, tick Role and click Add
  8.  Lock the screen to see all of the cards in the card container

Task 8: Add a Background Filter

  1.  Unlock the screen
  2. Click and drag the attribute name (column header) Company ID from the grid and drop it onto the Employees card container
  3. A pop up box will ask if you want to create a background filter - select Yes
    1. This background filter will ensure that when clicking on a record in the grid, only the employees relevant to that company will show on the contacts card

Task 9: Add a Map

  1. Open the  Palette using the option on the toolbar
  2. Expand the Maps section, and drag the Map onto the bottom blank tile on the screen
    1. Enter the Name, Map

Task 10: Add a Collapsible Tile (Optional)

  1. In the  Palette expand the Tiles section, and drag the Collapsible (Horizontal) tile and drop it to the left side of the grid
    1. Enter the Name, Reports, and click Confirm
  2. Drag the tile on the screen to the desired location
  3.  Lock the screen and click the chevron on the tile to open up the collapsible area
  4.  Unlock the screen 
  5. Open the palette and in the Basic Layouts section, click and drag the Area - Split H onto the collapsible tile
    1. Name it, Splitter, and click Confirm
  6. Click on Header 1 and in the  Properties on the right, change the Default Value to Reports
  7.  Apply your changes
  8. Pie chart and bar charts can be added to the tile, as required, see Creating Dashboards and Reports

Task 11: Screen Styling

  1. On the Companies List screen:
    1. click on Header 1 Dynamic and change the Default Value in the  Properties to Companies
    2. click on the Employees card container and change the Display Name in the  Properties to Employees
  2. Make the centre tile larger by clicking on Tile in the  Layers
  3. On the  Styles tab on the right, in the Style Settings section, tick the Width box and enter 60% into the box
  4.  Apply the changes


Further Reading (Optional)

For more information on the topics covered in this chapter, see the below links.