Introduction

In this chapter, we will learn everything about screen layouts from positioning options to ensuring our screen designs look great on all devices. This topic is delivered most effectively in a practical format, therefore to begin we will create a screen that will be used to illustrate the configuration options.

Create a Screen

1. From the screen's home page create a new screen.
   1. Name, Invoicing.
   2. Description, Company Orders
   3. Template, Tile with Buttons.
2. Add two additional tiles to the screen. Use the Blank - Column template from the palette.
3. The screen should look like this:
   1.  

Flex Layout

PhixFlow utilises CSS flexbox to lay out content on a screen. This makes it easy for us to create great-looking screen designs with only a few button clicks, and for more advanced users the CSS can be customised to suit. Flexbox allows us to specify the size of content and/or have the layout dynamically respond to the size of the screen on a device.

Flexbox is made up of a Parent container and Children. The parent determines how the child items are positioned. In the example we created, there is a Tile Container which is the parent, and tiles which are the children. Let's look at the options in more detail. 

Direction

The first option is the Flex-Direction, simply called Direction in PhixFlow which has two options. This is set on the parent container. By enabling this option PhixFlow automatically sets up the flex layout, and the direction of flow of the child items. The two options are illustrated below:

Row  

Column

To see this in PhixFlow:

1. In the layers section, click on the Tile Container.
2. The properties open, click on the Styles tab.
3. Scroll down until you see the flex options, the first option is Direction as highlighted below:
   1. 
4. Change Direction to Column, and click  OK.
   1. The column layout is displayed.
5. Switch the option back to Row and save the change.
   1. The tiles are laid out in a row.

Wrap

Flex Wrap is applied to the parent and it lets the child objects know what to do if they do not all fit on one line. By default, the child items will try to fit onto one line. With no-wrap set, content will stay on a single line, with wrap enabled content is allowed to wrap around to another line as needed, to be displayed. This is illustrated below. The screen size, content, size, maximum and minimum sizes set on the child items will determine if they will fit on one line. We will look at these settings later in this chapter.

To see this in PhixFlow:

1. The Tile Container is set to wrap.
2. Click on Tile and set its width to 80%. As illustrated below:
   1. 
3. This does not leave sufficient space for the remaining tiles so one of them wraps to the next line. 
   1. This is caused by a minimum width (min-width) being set on the tiles of 130px.
4. If you have a large monitor you may need to set the Tile container to be larger until the tiles wrap.
5. Remove the size settings applied as this was only applied to illustrate the wrapping.

Justify and Align

These settings determine how the child items will layout within a parent, they are analogous to the settings in a Word document and how text is positioned. The options available and how they are applied are directly linked to the Direction property. For example, Justify set to Flex Start applied to a row will start the child items from the left, whereas if applied to a column the child items start at the top. Here are the descriptions for each property. Once you have read through them, try them out on the example screen we created at the start of this chapter.

• Flex Start: items are packed toward the start of the flex-direction.
  • 
• Flex End: items are packed toward the end of the flex-direction.
  • 
• Center: items are centred along the main axis e.g. row.
  • 
• Space Between: items are evenly distributed in the line; the first item is on the start line, the last item is on the end line. 
  • 
• Space Around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
  • 
• Space Evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
  • 
• Baseline: items are aligned such that the baseline of their text is aligned.
  • 
• Stretch: fill the container perpendicular to the Direction, respecting the min and max sizes of the children.
  • 

Auto Size

Auto Size makes the child items take up the available space in the direction of the flexbox. Unlike the options we have seen so far, this particular option is set on the child objects. 

To see this in practice:

1. Select Tile 2 on the Invoicing screen.
2. In the Styles tab, scroll down to Auto Size, and untick this option.
3. Save your changes, the screen will appear as follows:
   1. 

Auto Size is very useful in making the layout adjust to fit the screen. Removing Auto Size the layout will adjust to fit the size of its content. This is an important distinction. Auto Size is screen-centric and no Auto Size is content-centric. 

Min/Max Sizes

Min and max sizes come in the form of heights and widths, they define the constraints of the items on a screen. They are especially important in controlling the look and feel of your screen content and how they display on different devices. This is because while many external factors can manipulate content, such as Flex Box Stretch, min and max sizes are still respected so that content will not shrink below the min size and will not expand beyond the max size.

The syntax for applying min and max sizes are as follows, and these are case-sensitive:

Padding and Margin

Padding is used to put space around the content within an area. The key concept here is that padding is placed within the area. This is illustrated below. 

Margin is used to make space outside an area. The key concept is it will create space between an item and the items surrounding it. This is illustrated below.

A practical example of this can be seen on the screen we have created. Margins are used to put spaces between tiles while Padding is used to move the tile content away from the edges. This is known in CSS as the Box Model.

Responsive Screen Design

W3C Schools defines responsive design as "...about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices.". By controlling how a screen adapts to different screens we can ensure our web applications are fit for purpose. A classic example of this is how will the screen look on a laptop vs a mobile phone. Using Phixflow you do not need to be a programmer or have in-depth knowledge of CSS or HTML to achieve great results.

By combining the options we've discussed so far we can achieve a responsive screen. The Serene Grey template is designed to be responsive already, however, you may wish to manipulate how it responds to better suit your requirements.

The screens are designed to use tiles to house content. We will create an example screen layout that combines auto size and minWidth to space content out responsively.

Example Screen

1. Delete and recreate the Invoicing screen from the start of this chapter.
2. Using the Layers section open the properties for Tile and rename it Tile 1.

Tiles Setup

1. Tile 1
   1. Open the properties for Tile 1 and click the Styles tab.
   2. Set Width to be 70%.
   3. Add a CSS Property
      1. CSS Tag, minWidth
      2. Value, 350px
   4. Save all your changes.
2. Tile 2 
   1. Open the properties for Tile 2 and click the Styles tab.
   2. Add a CSS Property
      1. CSS Tag, Width
      2. Value, calc(20% + 80px)
         This is calculating the width of the tile to be 20% of the tile container width plus 80px. We set the width as a CSS Property to keep the code tidy, we could just as easily set the value in the width field.
   3. Add a CSS Property
      1. CSS Tag, minWidth
      2. Value, 350px
   4. Add a CSS Property
      1. CSS Tag, maxWidth
      2. Value, 400px
   5. Save all your changes.
3. Tile 3
   1. Open the properties for Tile 3 and click the Styles tab.
   2. Add a CSS Property
      1. CSS Tag, minWidth
      2. Value, 350px
   3. Save all your changes.

Check Point

It may be necessary to close and reopen the screen for styles to show correctly. Depending on your display size, your screen will look similar to one of the following:

Add Data

1. From the Screen Toolbar click  Table.
2. Drag Orders onto Tile 1
   1. Select Grid
   2. Add all the Available Attributes (except Count) onto the grid.
   3. Close the Available Attributes popup.
3. Drag OrderLines onto Tile 3
   1. Select Grid
   2. Add all the Available Attributes (except Count) onto the grid.
4. Tile 2 will remain empty for now.
5. If the grid is not placed in the tile body area, use the layers section to move the grid into this location. Remember to hold Shift to remove an item or add an item to a different parent area.
6. From the Orders grid, drag Order_ID onto the OrderLines grid:
   1. Click Confirm. We want to create a background filter that will link Orders to Orderlines.
   2. Select OrderID from the dropdown, as we want to link to this attribute.
   3. Click Confirm.
7. Now when we select different Orders the corresponding Order Lines appear in the tile below.

Sort the Data

It is good practice to set a sort order as it makes locating content easier for a user.

1. Set the sorting on the Orders to be by Company Name.
2. Set the sorting on the Order Lines to be by OrderID and then OrderLine.

Set Headers

1. On Orders:
   1. Click the Order_ID header to open the properties.
      1. Set the Label to be Order.
   2. Click the CustomerIDCompanyName header.
      1. Set the Label to be Company.
   3. Click the Order Status header.
      1. Set the Label to be Order Status.
   4. Set the column widths appropriately.
2. On Order Lines:
   1. Set the following columns to Always Hidden:
      1. OrderLineID
      2. OrderID
   2. Click on the Amount header and set the Number Format to be P_SG - Currency GBP (£).
      1. This sets the currency to sterling. 

Page Header and Selector

1. Click on Header 1 Dynamic, and set the Default Value to be Company Orders.
2. Open the Palette → Form fields - Interactive section.
3. Click Search - DD and hold shift, and drag this into the Left area under Screen Header as illustrated below:
4. 
5. Name the component CompanyFinder.
6. It may be necessary to move the item if it does not land where expected. Simply click and drag it to the correct location.
   1. Hold shift if you need to move it out of or into a different parent area.
7. In the Palette → Form Field - By Data Type section drag Number into the hidden fields area in the Layers.
   1. Name, CompanyID.

Set Up the Dropdown

1. Click on CompanyFinder, the outermost area.
2. We need to sort the formatting of the item so it lines up with the header.
3. Add a CSS Property:
   1. CSS Tag, padding
   2. Value, 0px 0px 0px 10px.
      1. This is shorthand for setting the padding for the Top, Right, Bottom and Left padding.
   3. Save your changes.
4. Select the inner CompanyFinder area. This is the actual input field/dropdown.
   1. The dropdown values are taken from a view. So first we must create one.
   2. In the Basic Settings, next to View Name click  Table
      
      1. Expand the Companies Table, and expand the Views section.
      2. Click  to create a new view.
      3. Set Name to be DD_Companies.
         1. DD_ is just a naming convention to indicate this view is used for a dropdown.
      4. Set a Default Sort Order by Company Name.
      5. In the View Attributes add:
         1. CompanyID
         2. CompanyName
      6. Double click CompanyID and in the properties set this to be Always Hidden as we do not want it to be shown in the dropdown but we do need to reference it later.
      7. Save your changes.
   3. Drag the newly created view into the View Name field on the CompanyFinder properties.
   4. In the Drop Down Value Field, we set the name of the field that will appear in the dropdown. Set this to be CompanyName.
      1. At this point, the dropdown will function and allow the user to select a company from the list. You can see this if you lock the screen. However, PhixFlow also allows the dropdown fields to populate other fields such as an ID. Here we will allow the user to select a company by name but populate the CompanyID to allow us to filter by it later. Mappings facilitate this. 
   5. In the Mappings section click  to add a new mapping.
      1. Form Field, CompanyID.
         1. This is the name of the form field on your screen you want to populate.
      2. Drop Down Field, CompanyID.
         1. This is the name of the attribute in the dropdown view that will be used to populate the Form Field.
      3.  Save your changes.
   6. Your configuration should look like this:
      1. 
   7.  Save your changes.
5. The dropdown is set up. Now we need to get this to filter our Orders grid.

 Filter and Action

1. Set the Filter:
   1. Click on Orders
   2. In the properties → Background Filter Rules section click .
   3. Set the Rule Expression to, _form.CompanyID != _NULL
      1. This is stating that from the screen check the attribute CompanyID is not null, and if it not null (i.e. the expression returns true) apply the filter. If an expression returns true the filter will be used.
   4. Create a new filter with the following settings:
      1. 

2. Set the Action:

   1. An action is required to force the grid to refresh and apply the selected company to the background filter of the grid.

   2. Click the Search button next to the Company Name dropdown.
   3. In its properties, select the Actions tab.
   4. Set the following properties:
      1. 
   5.  Save all your changes.
   6. Right-click the Orders grid and select Show the View Configuration.
   7. In it's properties, select Actions.
   8. In the Refresh Action section, click  Table-action.
      1. Refresh actions are the actions that if run will cause the view to refresh. At the time of writing this is limited to table actions only and does not support actionflows.
      2. A list of actions that will appear,
         1. Expand the Serene Grey section.
         2. Expand the Table Action section.
         3. Drag the Table Action P_SG Force Refresh from the repository to the Refresh Actions on the Orders view as illustrated here:
         4. 
3.  Save all of your changes.

Testing

1. Switch to  Application Mode and selecting a company and clicking on the search button will cause the grid to update. Note the clear button removes the selected company and then you will need to click search for all companies to display.
   1. 

Trouble Shooting

We've covered a lot in this session and if your screen isn't working quite how you expect don't panic. Here are some useful troubleshooting tips:

1. I am selecting a company but nothing is happening?
   1. The action on the Search button must be in the refresh actions of the view. To see if this is a refresh issue, click the 3 dot menu on orders and click refresh, this forces a manual refresh.
   2. In the layer section, unhide the hidden fields area and make sure when you select a company from the dropdown field that this is being populated. If it isn't then you need to check the mappings setup on the dropdown field.
2. The Orders grid is filtered but the Order Lines is not changing?
   1. Add the Order ID column back to the Order Lines grid and see if this is changing. 
   2. Check the background filter on the grid and make sure it is referencing the Orders grid by name.