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 screens 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.  Image RemovedImage Added

Flex Layout

PhixFlow utilises CSS flexbox to layout content on a screen. This makes it easy for us to create great looking screen designs with only a few button clicks, and for the more advanced uses 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 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. Lets look at the options 

Direction

The first option is the Flex-Direction, simply called Direction in PhixFlow. This is set on the parent object. By enabling this option PhixFlow automatically sets up the flex layout, and the direction of flow of the children items is set. This is illustrated below:

Row  

Column

To see this in PhixFlow:

1.  In the layers section, click on the Tile Container.
2. The properties one, click on the Styles tab.
3. Scroll Down until you see the flex options:
   1. 
4. Change Direction to Column, and click 

   Insert excerpt
   _finish _finish nopanel true

   .
5. Switch the option back to Row and save the change.

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 children 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 as needed to be displayed. This is illustrated below. The screen size, content, size 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 be 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 as there is a minimum width (min-width) 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.

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 is directly linked to the Direction property. For example Justify = Flex Start, applied to a row will start the child items from the left where as 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 line.
  • 
• Space Between: items are evenly distributed in the line; first item is on the start line, last item 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 as their baselines align
  • 
• Stretch: fill the container perpendicular to the Direction, respecting the min and max sizes of the children.
  • 

Auto Size

Auto Size makes the child objects take up the available space in the Direction of the flex box. 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 screens. This is because while many external factors can manipulate content, such as Flex Box Stretch, min and max sizes are 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 the padding is placed within the area. This is illustrated below. 

Margin is used to make space outside an area. The key concepts is it will create space between the item and 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.

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 laptop vs a mobile phone?

By combining the options we've discussed so far we can achieve a responsive screens. 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.

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

Check Point

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

Add Data

1. From the Screen Toolbar click 

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   .
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 items 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 Confrim Confirm.
7. Now when we select different Orders the corresponding Order Lines appear in the tile below.

Sort the Data

1. Set the sorting on the Orders to be by Company Name.
2. Set the sorting on the Order Lines to be by CompanyName 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. 

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 → For Field - By Data Type section drag a number into the hidden fields area in the Layers.
8. Call this CompanyID.

Set Up the Dropdown

1. Click on CompanyFinder, the outer most 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 short hand 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

      Insert excerpt
      _tableOnly _tableOnly nopanel true

      
      
      1. Expand the Companies Table, expand Views.
      2. Click 

         Insert excerpt
         _addIcon _addIcon nopanel true

          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.
      7. Save your changes.
   3. Drag the newly created view into the and 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 drop down 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 drop down fields to populate other fields such as an ID. Here we will allow the user to select a company but also populate the CompanyID to allow us to filter by it later. Mappings facilitate this. 
   5. In the Mappings section click 

      Insert excerpt
      _addIcon _addIcon nopanel true

       to add a new mapping.
      1. Form Field, CompanyID. This is the name of the field on your screen you want to populate.
      2. Drop Down Field, CompanyID. This is the name of the attribute in the drop down view that will be used to populate the Form Field.

      3. Insert excerpt
         _save _save nopanel true

          your changes.
   6. Your configuration should look like this:
      1. 

   7. Insert excerpt
      _save _save nopanel true

       your changes.
   8. The dropdown is setup. 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 

      Insert excerpt
      _addIcon _addIcon nopanel true

      .
   3. Set the Rule Expression to, _form.CompanyID != _NULL
      1. This is stating that, from the screen select the attribute CompanyID and if it is not null, apply the filter. If the expression returns true the Filter will be used.
   4. Create a new filter with the following settings:
      1. 

      2. dwdwdd

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 it's properties, select the Actions tab.
   4. Set the following properties:
      1. Image Added
   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 

      Insert excerpt
      _action _action nopanel true

      .
      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.
      4. Image Added

3. Insert excerpt
   _save _save nopanel true

    all of your changes.

Testing

1. Switch to 

   Insert excerpt
   _app_mode _app_mode nopanel true

    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 the all companies to display.
   1. Image Added