Introduction

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

• Insert excerpt
  _lock _lock nopanel true

  ed - the content can be interacted with, such as a button click will trigger the button's action.

• Insert excerpt
  _unlock _unlock nopanel true

  ed - the content 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.

Image Added

1. To interact with the screen, 

   Insert excerpt
   _lock _lock nopanel true

    the screen using the Context Toolbar option.
2. 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

   .
3. PhixFlow displays the toolbar for the screen so that you can begin to make changes.

Palette

1. To view the palette, click 

   Insert excerpt
   _palette _palette nopanel true

    from the context toolbar

1. and the palette displays on the right.

Adding Content

We In this chapter, we will now create the following screen:.

Image Added

Adding a Grid

We can drag a table directly onto a screen to display it.

1. From the toolbar, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   s.
2. The list of available tables will appear in the

1. Repository.
2. Drag the

1. Companies table onto the screen canvas.

1. You will be asked how you want to display the data, select Grid.
   Image Removed
   1. 1. Image Added
      2. The
   attribute picker
   1. 1. Available Attributes selector appears and
   here
   1. 1. we can select the attributes we wish to display, this will include the attributes from the table and
   attributes
   1. 1. those from related tables.
   2. Select all the attributes from the Current Table and drag them onto the grid.
      1. Close the Available Attributes selector.

   Image Added

   1. 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
   1. 1. , on the 

         Insert excerpt
         _property_tabs _property_tabs name style nopanel true

         , navigate to Grid Settings → Grid Default Width (pixels) and enter a specific value
   here. 
   2. Click on the Company Name column header
   Set Grid Settings →
   1. .
      1. Set Grid Settings → Grid Default Width (pixels) to be, 200.
      2. In the Label section
   we
   1. 1. of the

         Insert excerpt
         _property_tabs _property_tabs nopanel true

          we will change the
   name
   1. 1. value displayed in the column header to be, Name.
      2. Click 

         Insert excerpt
         _save _save nopanel true

         .
   2. 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
   1. 1. 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.You can lock an app to interact with it as a user will but design panes remain displayed
   1. 1. .
      2. 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_locknopaneltrue.

   Set a

   Static

   Header

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

      Insert excerpt
      _save _save nopanel true

      .

   Tip
   In the event that you do not see the change appear on your screen, close and reopen the screen.

   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

2. The Grid
   1. Use Custom Data Range
3. The View
   1. Periods
   2. Inheriting the period from the table.
4. The Table
   1. Table Period.
Combined filteringDoes 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 AnchorformBuildingFindComponentParentformBuildingFindComponentParent

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  Insert excerpt_layer_slider_layer_slidernopaneltrue. 

Using Find in Repository

Right-click any item on an unlocked screen and select Insert excerpt_repository_find_repository_findnopaneltrue 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. 

Image Removed

Tip
To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package.

Moving Components

Insert excerptMoving Components on a ScreenMoving Components on a Screennopaneltrue  See Moving Components on a Screen.
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

9. Date
10. Date-Time
Numbers

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.
5. Name the tile Additional Info.

Tip
There are lots of tiles available, each designed to satisfy a specific need or act as a foundation for your design. Hover your mouse over any of the tiles or components in the palette to see a full description.

Check Point

At this point your screen should look like this:

Image Added

Add a Card Container 

Anchor
AddCardContainer AddCardContainer

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, Employees.
   2. Image Added
3. We now have a card container that is designed to hold contact information. We will use this to display employee information.
4. Click on the Employees card container to open its

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    on the right.
   1. Or click on the Employees card container in the Layers section on the left.
   2. Image Added
5. We need to tell the card container where to get its information from. In the 

   Insert excerpt
   _property_tabs _property_tabs nopanel true

   , under Basic Settings, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   , next to the Table drop down box.
6. Drag the Employees table from the Repository into the Table box within the Employee Card Component's Basic Settings.
   1. Image Added
   2. This sets the Employees as the table backing the card container and will allow us to display the data.
   3. Click 

      Insert excerpt
      _save _save nopanel true

      .
   4. When working in Design Mode, the card container will only display one card containing the data from the first record it 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, either:

a. Change the names of the form fields and dynamic text fields to match the attribute name on the Employees table.

b. Or, tell PhixFlow which attributes to associate with them using the Add Backing Attribute option.

8. Here we will use the latter:

a. Right-click on First Name and select Add Backing Attribute.

b. In the Available Attributes selector that opens, tick first_name.

c. Click the Add button.

i. The form field will now display this data in the first_name attribute on the screen.

Image Added

d. We will repeat these steps but this time set the Last Name field to be the last_name attribute on the Employees table.

9. We will return to this card container later and add additional content.

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.
3. Name it Splitter.
   1. 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.
4. In the Layers section on the left:
   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 moves the items within a container.
      2. Image Added
5. We will now add a map to the Splitter Area Bottom.
   1. From the palette → Maps section, drag the Map over the bottom area of Splitter.
      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:

Image Added

Tile Formatting

We will now look at formatting the tiles. By default tiles have Fit to available space enabled, which means that the 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 is too big to display in the tile a scrollbar will be provided. When we remove Fit to available space, the tiles will be sized to fit their content. So to reiterate:

• Fit to available space ticked: Consumes the available space.
• Fit to available space unticked: Content will determine the size.

Grow Factor Example

Fit to available space is useful for laying out screen content, but sometimes we want one area to be larger than another. Here we can use the grow factor.

1. In the Layers on the left of the screen, click on Tile in Tile Container.
2. The 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    will open on the right, which contains all style settings, including sizing.
3. Set Grow Factor to 2 - This will make it larger than the other tile.
   1. 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. 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 Fit to available space to make sure the remaining tile automatically consumes the remaining space.

1. Switch back to

   Insert excerpt
   _design_mode _design_mode nopanel true

    and remove the growth factor added above.
2. Click 

   Insert excerpt
   _save _save nopanel true

   .
3. On your screen, click on the Additional Info tile to open its 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    on the right.
4. Untick Fit to available space.
5. Set Width to 350px.
   
   1. We can also specify sizes as a percentage, 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 property min-size. It is often a good idea to specify a minimum and maximum size to ensure your design appears as you expect. For example, when viewing on a mobile device or very large monitor.