Introduction

In order to To add content to the a screen we need access to the palette and the screen itself must be

• Insert excerpt
  _lock _lock nopanel true

  ed, when a screen is locked the content can be interacted with, such as a button click will trigger the button's action.

• Insert excerpt
  _unlock _unlock nopanel true

  ed, when a screen is unlocked it can be edited, such as clicking a button will open its properties.

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 interact with 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 itusing the Context Toolbar option.

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

In this chapter, we will create the following screen.

Adding a Grid

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

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 You will be asked 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 from the Current Table and drag them onto the grid.
   1. Close the attribute selector.
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 value 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 App Mode to see exactly 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.
    3. You can lock an app to interact with it as a user will but design panes remain displayed.
    4. To switch back to designing your application, click

       Insert excerpt
       _design_mode _design_mode nopanel true

        in the top right-hand corner.excerpt-include_lock_locknopaneltrue.

Set a 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 if it is not showing.
3. Navigate to the Tiles section
4. Drag Blank-Column 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. Which means the tile is designed to be placed here.
   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.
   1. Name
   it
   1. , Employees.
3. We now have a card container that is designed to hold contact information. We will use this to display employee information.
4. In the Employee Details Card Container Employees card container properties open on the right.
   1. If they have closed, click on the Employees card container in the layouts section on the left to reopen them.
5. We need to tell the card container where to get its information from. Click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   , next to the Tables box.
6. Drag Employees into the Tables box.
   1. This sets the Employees as the table backing the card container and will allow us to display the data.
   2. With Employees as the backing table, PhixFlow will automatically associate any table attributes to 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.
   3. 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.
7. 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 In the Available Attributes dialog dialogue that opens tick first_name.
   3. Click the Next button.
      1. The form field will now display
      the
      1. this data in the first_name attribute on the screen.
   4. We will repeat these steps but this time set the Last Name field to be the last_name attribute on the Employees table.
8. 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 any of the components in the palette to see a full description. 
3. Name it Splitter.
4. This will most likely have moved the card container. What we will do now is move the card container into the top part of the splitter.
5. In the Layouts section on the rightleft:
   1. Expand Splitter.
   2. Find the Employees card container. Click on it and hold the shift key, and now drag it onto Split Area Top. 
      1. The card container will now appear in the top area. Dragging + Shift key moves items out of or into a different container. Dragging without the shift key move the items within a container.
6. We will now add a generic map to the Splitter Area Bottom.
   1. From the palette
   , from the
   1. → Maps section, drag the Map over the bottom area of Splitter.
      Call
      1. Name it Map.
         1. This is a generic map, instructions are provided in the expression for the component on how to set this to dynamically update or see the article: How-to Create a Google Map
      2. The map will display when we switch to 

         Insert excerpt
         _app_mode _app_mode nopanel true

          or 

         Insert excerpt
         _lock _lock nopanel true

          the screen.

   Moving Components

   To find out more about moving components see Moving Components on a Screen.

   Check Point

   Switch to 

   Insert excerpt
   _app_mode _app_mode nopanel true

    or 

   Insert excerpt
   _lock _lock nopanel true

    the screen and it should look like the image below.:

   

   Linking Views

   Data is displayed in PhixFlow via using views. The grid and the card container are both considered types of views. At present, the Employee card container is showing all employees and ideally we only what to show those associated to with the company selected on the Companies grid. We will achieve this using a filter.

   We will create a background filter as follows:

   1. Make sure your screen is unlocked.
   2. Drag Company ID from the grid onto the card container. 
   3. Select Company ID and click OK.
      1. The prompt is for us to select which attribute on the card container we want to compare to the Company ID we just dragged across.
   4. The background filter is created and applied automatically. The filter properties open on the right.
   5. In the properties window , pane change the Name to Selected Company.
   6. Click 

      Insert excerpt
      _save _save nopanel true

      .

   Filter Explanation

   1. Filter Details: here is an overview of the filter details, for more information see Filter.
      1. 
   2. Our Clause, Companies.CompanyID, is referencing the component on the screen called Companies and its attribute CompanyID. One very important factor here is that our clause is set to be an expression. 

      1. Insert excerpt
         _filter_literal _filter_literal nopanel true

          indicates the value is expected to be a string. Click this icon to switch to an expression.

      2. Insert excerpt
         _filter_expression _filter_expression nopanel true

          indicates the value is expected to be an expression. Click this icon to switch to a string.

   Accessing the Filter

   The filter we created is owned by the card container. This means to access the filter we navigate to t through the card container.

   1. Click on the card container in the Layers section or click on the card container header on the screen, to open its properties.
   2. Expand the Background Filter Rules, here we see a list of all background filter rules applied to the card container.
   3. Double-click on any rule to open it. For our example double-click Selected Company.
   4. We see the Filter Rule. This is the condition that needs to be satisfied in order for the Filter to be applied. Our example is blank, this means it will always firebe true and therefore apply the background filter. However, we can create a filter condition using PhixScript. We will see examples of this later in the course.
   5.  To To open the filter we created click the Filter hyperlink above the filter name.
   6. We also have the option to disable the filter here by unticking the Enabled check box. This is helpful if debugging.
   7. Finally, we have the option to Stop if True. If ticked, if this filter rule is true, no filter rules that occur after this one will be checked.
   8. Switch to app mode to 

      Insert excerpt
      _app_mode _app_mode nopanel true

      and when you select different companies in the grid the associated employees should will be displayed.
   9. Switch back to

      Insert excerpt
      _design_mode _design_mode nopanel true

      .

   Tile Formatting

   We will now look at formatting the tiles. By default tiles have Auto Size enabled, this which means that the tile swill tiles will consume the space available to them on the screen and tile content will be made to fit the tile e.g. if the content if to is too big to display in the tile a scrollbar will be provided. When we remove Auto Size, the tiles will be sized to fit their content or . So to reiterate:

   • Auto Size ticked: Consumes available space.
   • Auto Size unticked: the content will determine the size
   specified
   • .

   Growth Factor Example

   Auto Size is useful for laying out screen content, but sometime sometimes we want one area to be larger than another. Here we can use the growth factor.

   1. Click on Tile in Tile Container.
   2. In the properties on the right click on the Style Tabtab. All style settings including sizing are in here.
   3. Scroll down to Growth Factor. Growth factor The growth factor determines the proportionate size of this tile in comparison to the other tiles it shares its space with and the space available.
   4. Set this to be 2. This will make it twice as large as larger than the other tile.
   5. Switch to 

      Insert excerpt
      _app_mode _app_mode nopanel true

       to see the change.

   Specific Size Example

   We will now specify a specific size rather than a proportion and use Auto Size  Size to make sure the other remaining tile automatically takes up consumes the remaining space.

   1. Switch back to design mode and remove the growth factor added above.
   2. On your screen, click on the Additional Info tile to open its properties.
   3. Click on the Style tab.
   4. Scroll down to Auto Size, and untick this.
   5. Scroll down to the Position Settings section.
   6. Set a Width of 350px.
      
      1. We can also specify sizes as a percentage of available space, for example 33%.

   When we specify a size, typically this is what is seen on a screen. However, it should be noted that if there is insufficient space to show all the content on the screen components, including tiles, will shrink down to a minimum size, denoted in the CSS as property min-size. It is often a good idea to specify a minimum or and maximum size to ensure your design appears as you requireexpect. For example, when viewing on a mobile device or very large monitor.