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 

   Insert excerpt
   _unlock _unlock nopanel true

   .
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 

   Insert excerpt
   _lock _lock nopanel true

    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 

   Insert excerpt
   _palette _palette nopanel true

    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

   Insert excerpt
   _tableOnly _tableOnly nopanel true

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

      Insert excerpt
      _save _save nopanel true

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 

       Insert excerpt
       _app_mode _app_mode nopanel true

        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

       Insert excerpt
       _design_mode _design_mode nopanel true

        in the top right hand corner.

       Insert excerpt
       _lock _lock nopanel true

       .

Set a Static Header

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

   Insert excerpt
   _save _save nopanel true

   .
5. IN the event you do not see the change appear on your screen, close and reopen the screen.

Add Items from the Palette

1. We will now add an additional Tile.
2. Open your palette.
3. Navigate to the Tiles section
4. Drag Blank-Column - Blank onto your screen.
   1. Notice the centre of the screen highlights this is because the body of your screen is the preferred parent of a Tile.
   2. There are lots of tiles available each designed to satisfy a specific need or act as a foundation for your own design. Mouse over the tiles to find out more about each.
5. Name the tile Additional Info.

Check Point

At this point your screen should look like this:

Add a Card Container

We will add a card container that will display the employees for the selected company.

1. In the palette expand the Card Containers section.
2. Drag Contacts onto the tile Additional Info.
3. We now have a card container that is designed to hold contact information.
4. In the Employee Card Container properies open on the right.
   1. If they have closed click on the Employees card container in the layouts section on the left.
5. Click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   , next to the Tables box.
6. Drag Employees into the Tables box.
7. This sets the Employees as the table backing the card container and will allow us to display the data.
   1. With Employees as the backing table PhixFlow will automatically associate any table attributes to any form fields or dynamic text fields with the same name . For example, there is a dynamic text field called Role on the Employees card container, this matches the attribute Role on the Employees table, therefore the Role data is displayed in the dynamic text.
   2. When working in design mode the card container will only display one card containing the data from the first record is receives from the backing table. When we switch to 

      Insert excerpt
      _app_mode _app_mode nopanel true

       or 

      Insert excerpt
      _lock _lock nopanel true

      , all the data we have chosen will be displayed.
8. To display the data on the Employees table we can either change the names of the form fields and dynamic text fields to match the attribute name on the Employees table or we can tell PhixFlow which attributes to associate with them. Here we will use the latter option:
   1. Click on First Name to highlight it and then right-click and select Add Backing Attribute.
   2.  In the Available Attributes dialog that opens tick first_name.
   3. Click the Next button.
   4. The form field will now display the data in the first_name attribute.
   5. We will repeat these steps but this time set the Last Name field to be the last_name attribute on the Employees table.
   6. We will return to this card container later and add additional content to display data.

Add a Splitter

We will now add a splitter. This will allow us to separate a tile into two separate sections.

1. In the palette open the Basic Layouts section.
2. Drag the Area - Split H onto the tile Additional Info.
   1. Hover your mouse over to get a description. 
3. Name it Splitter.

Edit the Card Container

build up a employees contact card.

Add a splitter and move card into the top

Add a map to the bottom.

Link the two areas

Add the Crud buttons

Create a new screen and show more screen options

About Tables → Views → Grids

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

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

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