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

Open your ERD and on the Companies table, click
Choose Create Screen
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
On the Available Attributes selector, select all of the attributes by clicking the top tick box, then deselect the attributes, Status, UpdatedTime and UpdatedByName
Click and drag the Attributes onto the screen
1. Note: The Available Attributes selector will stay open until closed
A pop up box will show asking how the attributes should be displayed - select Grid
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

On the Grid Actions wizard, select the to create a new edit screen
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
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
Close the Grid Actions wizard and Available Attributes selector

Task 3: Configure the Edit Form

Lock the Companies List screen
Select any record on the grid and click the Edit button
The Edit Form screen you created in Task 2 will open
Unlock this screen by right-clicking and pressing Unlock
As PhixFlow knows this screen is backed by the Companies table, click on the Attributes button in the toolbar
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.
Click and drag the attributes onto the Companies Form screen
A pop up box will show asking how the attributes should be displayed - select Field
A further pop box will show asking if you would like to create Save and Delete actions - select Yes
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
Close the Form Actions wizard and Available Attributes selector
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
Change the template of the Web field by right-clicking on the field and selecting Change Template
On the Select Template window, choose the URL option in the Form Field Templates section, and click Select Template

Task 4: Add Validation

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

Click on the header, Header 1 Dynamic, and in the Properties on the right, change the Default Value to Company Details
Apply the changes
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
Unlock the Companies Form screen
To change the positioning of the screen, select Properties in the toolbar
On the Styles tab, make the following changes:
1. Width = 400
2. Height = 100%
3. Top = 0
4. Right = 0
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

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

Task 7: Add a Contacts Card

Click on the Palette tab and expand the Card Containers section
Click and drag the Contacts card container onto the top tile
1. Enter the Name, Employees
Click on the Employees card container to open its Properties tab on the right
Within the Basic Settings, click the drop down under Table
1. Choose the Employees table
2. Apply the changes
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
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
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
Lock the screen to see all of the cards in the card container

Task 8: Add a Background Filter

Unlock the screen
Click and drag the attribute name (column header) Company ID from the grid and drop it onto the Employees card container
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

Open the Palette using the option on the toolbar
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)

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
Drag the tile on the screen to the desired location
Lock the screen and click the chevron on the tile to open up the collapsible area
Unlock the screen
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
Click on Header 1 and in the Properties on the right, change the Default Value to Reports
Apply your changes
Pie chart and bar charts can be added to the tile, as required, see Creating Dashboards and Reports

Task 11: Screen Styling

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
Make the centre tile larger by clicking on Tile in the Layers
On the Styles tab on the right, in the Style Settings section, tick the Width box and enter 60% into the box
Apply the changes

Browser not supported