Introduction

In order to add content to the screen we need access to the palette and the screen must be unlocked.

Locking and Unlocking a screen

The screen is unlocked if you can see the context toolbar for the screen.

1. To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select  Unlock.
2. PhixFlow displays the toolbar for the screen so that you can begin to make changes.
3. If you want to see how a user will experience the screen, you can  Lock the screen, this means when we click on an item we will interact with it rather than edit it.

Palette

1. To view the palette, click  Palette from the context toolbar to display the palette on the right.

Adding Content

We will now create the following screen:

Adding a Grid

We can drag a table directly onto a screen to display it. This is how:

1. From the toolbar click  Table
2. The list of available tables will appear in the repository
3. Drag the companies table onto the screen canvas.
4. Select how you want to display the data, select Grid.
5. 
6. The attribute picker appears and here we can select the attributes we wish to display, this will include the attributes from the table and attributes from related tables.
7. Select all the attributes and drag them onto the grid.
8. Column widths can be set by dragging the header to the desired width.
   1. If you want a specific size, click the column header.
   2. In the properties that open navigate to Grid Settings → Grid Default Width (pixels) and enter a specific value here. 
9. Click on the Company Name column header
   1. Set Grid Settings → Grid Default Width (pixels) to be, 200.
   2. In the Label section we will change the name displayed in the column header to be, Name.
   3. Click  Apply
10. Take some time to space out the columns as required.
    1. Once you are happy with your column layout you can test it in app mode to see how it will appear to users. 
    2. Click  Application Mode in the top right corner of the screen to switch the application into App Mode. This is how users will experience your application.
       1. You can lock an app to interact with it as a user will but design panes remain displayed.
    3. To switch back to designing your application, click  Design Mode in the top right hand corner. Lock.

Set a Static Header

1.  Click on the header, Header 1 Dynamic.
2. Its properties open.
3. In the Default Value, change the text to be Companies Data.
4. Click  Apply.

Add Items from the Palette

1. Preferred Parent Highlighting

1. Adding Tiles
   1. Tile Types
2. Editing Headers
3. Editing Footers
4. Moving Content on the Screen
   1. Shift or not to Shift

Adding Data as a Grid

1. The Grid
   1. Use Custom Data Range
2. The View
   1. Periods
   2. Inheriting the period from the table.
3. The Table
   1. Table Period.
4. Combined filtering
   1. Does the grid setting override the view????
5. CRUD Buttons
   1. Adding Crud buttons after prompt.
6.  Attributes
   1. Adding attributes
   2. Relational Attributes
   3. Reordering Attributes
   4. Hiding Attributes
   5. Conditionally Hiding Attributes.
7. Styling a Grid
   1. Basics
      1. Bold Text
   2. Available Styling i.e. default styles.
   3. Conditional Formatting Background Colour
      1. Cell and Row.
   4. Removing the Title
   5. Labelling and double header?
   6. Link to in depth How To guide
8. In grid editing, link to how to.

Adding Data as a Card Container

1. The Container
   1. Table
   2. View
   3. Filtering
2. The Cards
   1. Design and App mode display.
   2. Adding filters dynamically
3. Changing the backing attributes

Adding a Chart

1. Simple Setup
2. Colour Maps
3. Link to setting up more chart types.

Finding Layouts and Components

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Moving Components

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.

Styles 

explanation

Style Hierarchy

1. Application Styles
2. Shared Style
3. Local Styles
4. Formatting Rules
5. Overriding Styles Best Practice
6. Clearing Styles

Creating Screens from the Home page

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.

Data Type and Formatting

1. Date
2. Date-Time
3. Numbers