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

   Insert excerpt
   _erd _erd nopanel true

    and on the Companies table, click 

   Insert excerpt
   _more_options_erd_IconOnly _more_options_erd_IconOnly nopanel true

2. Choose

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    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

      Insert excerpt
      _template _template nopanel true

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

   Insert excerpt
   _attributes _attributes nopanel true

    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

   Insert excerpt
   _grid _grid nopanel true

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 

   Insert excerpt
   _add_icon _add_icon nopanel true

    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 

      Insert excerpt
      _toggle_off _toggle_off nopanel true

   3. Leave All Users can View Data toggled on 

      Insert excerpt
      _toggle_on _toggle_on nopanel true

   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. Insert excerpt
   _lock _lock nopanel true

    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. Insert excerpt
   _unlock _unlock nopanel true

    this screen by right-clicking and pressing

   Insert excerpt
   _unlock _unlock nopanel true

5. As PhixFlow knows this screen is backed by the Companies table, click on the

   Insert excerpt
   _attributes _attributes nopanel true

    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. 
      

      Expand
      title Why are these attributes deselected?
      Tip CompanyID is deselected because it already exists on the form, as a Insert excerpt _hidden _hidden nopanel true  field. You can see this by looking in the Insert excerpt _layers _layers nopanel true . 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

   Insert excerpt
   _field _field nopanel true

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

       Insert excerpt
       _layers _layers nopanel true

        and drag it to the desired location
13. Change the template of the Web field by right-clicking on the field and selecting 

    Insert excerpt
    _template_change _template_change nopanel true

14. On the 

    Insert excerpt
    _template_select _template_select nopanel true

     window, choose the

    Insert excerpt
    _url _url nopanel true

     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

   Insert excerpt
   _property_settings _property_settings nopanel true

    window on the right should show CompanyName String Field at the top
2. On the

   Insert excerpt
   _property_settings _property_settings nopanel true

   , scroll down the section, Validation

   1. Insert excerpt
      _check_box_tick _check_box_tick nopanel true

       the Mandatory box (to override the inherited setting) and toggle it on 

      Insert excerpt
      _toggle_on _toggle_on nopanel true

   2. Insert excerpt
      _check_box_tick _check_box_tick nopanel true

       the Validation Type box and choose Alpha Numerics - Extended from the drop down

   3. Insert excerpt
      _save _save nopanel true

       the changes

Task 5: Setup Header and Screen Position

1. Click on the header, Header 1 Dynamic, and in the

   Insert excerpt
   _property_settings _property_settings nopanel true

    on the right, change the Default Value to Company Details 

2. Insert excerpt
   _save _save nopanel true

    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. Insert excerpt
   _unlock _unlock nopanel true

    the Companies Form screen
5. To change the positioning of the screen, select

   Insert excerpt
   _property_settings _property_settings nopanel true

    in the toolbar
6. On the

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

   , make the following changes:
   1. Width = 400
   2. Height = 100%
   3. Top = 0
   4. Right = 0

7. Insert excerpt
   _save _save nopanel true

    the changes and close the Companies Form screen
   1. Close and reopen the screen if the changes do not show

Task 6: Add Tiles to the Screen

1. On the Companies List screen,

   Insert excerpt
   _unlock _unlock nopanel true

    the screen
2. Open the

   Insert excerpt
   _palette _palette nopanel true

    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

   Insert excerpt
   _palette _palette nopanel true

    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 

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    on the right
4. Within the Basic Settings, click the drop down under Table
   1. Choose the Employees table

   2. Insert excerpt
      _save _save nopanel true

       the changes
5. On the Employees Card Container, right-click on First Name and select

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

   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 

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

   1. In the Available Attributes selector, tick last_name and click Add
7. On the Employees Card Container, right-click on Role and select 

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

   1. In the Available Attributes selector, tick Role and click Add

8. Insert excerpt
   _lock _lock nopanel true

    the screen to see all of the cards in the card container

Task 8: Add a Background Filter

1. Insert excerpt
   _unlock _unlock nopanel true

    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

   Insert excerpt
   _palette _palette nopanel true

    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

   Insert excerpt
   _palette _palette nopanel true

    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. Insert excerpt
   _lock _lock nopanel true

    the screen and click the chevron on the tile to open up the collapsible area

4. Insert excerpt
   _unlock _unlock nopanel true

    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

   Insert excerpt
   _property_settings _property_settings nopanel true

    on the right, change the Default Value to Reports

7. Insert excerpt
   _save _save nopanel true

    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

      Insert excerpt
      _property_settings _property_settings nopanel true

       to Companies
   2. click on the Employees card container and change the Default Value in Display Name in the

      Insert excerpt
      _property_settings _property_settings nopanel true

       to Employees
2. Make the centre tile larger by clicking on Tile in the 

   Insert excerpt
   _layers _layers nopanel true

3. On the

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    on the right, in the Style Settings section, tick the Width box and enter 60% into the box

4. Insert excerpt
   _save _save nopanel true

    the changes

Further Reading (optional)

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

• Adding Validation 
• Making a Card Container
• How-to Create a Google Map
• Creating Dashboards and Reports
• Screen Styling
• Sizing and Positioning Screen Content
• Adding Grid Icons and Interactive Icons
• Screen Building Course (Full Course)