Introduction

In this chapter we will bring together the knowledge we have gained in this course, along with some new techniques, to create a landing screen for our application. The screen will look like the following:

Create a Blank Screen

There are templates for application home screens available when creating a screen, however, in this exercise we will build a screen from scratch to help us practice what we have learnt.

1. Create a new screen from the screen's home page.
   1. Name, Home.
   2. Description, Application home screen
   3. Template, Blank.
      1. Scroll to the right and select Blank.
   4. Click Create Screen
2. The screen will open.
3. Click in the middle to open the properties.
   1. Click the Styles tab.
   2. In the direction settings and set the following:
      1. Justify, Center
      2. Align, Center
   3.  Apply your changes.

Build Up the Centre Tile

1. Add a Tile
   1. From the Palette drag a Blank - Row tile onto the screen.
      1. Name, Centre.
      2. Click Confirm.
2. Open the properties for Centre.
   1. Click the Style tab.
   2. Fit to available space, untick.
   3. Add the following CSS Properties:
      1. width, 75%.
      2. height, 50%.
      3. minWidth, 350px.
      4. minHeight, 480px.

3.  Apply and Close to save your changes.

   1. This invokes a screen update. If you do not see the changes you make on a screen, close and reopen the screen to force a refresh.
4. Add the centre areas.
   1. We will use simple areas to build up our screen structure:
   2. From the Palette in the basic layouts, click on Area - Column and holding shift, drag it onto the screen.
      1. Name, Left.
         1. Areas are a generic component that can be placed anywhere, therefore they do not have a preferred parent. We hold down the shift key to place the area inside the screen's form.
   3. Add a second Area - Column on the screen.
      1. Name, Right.

5. By default, the areas have a simple style applied so they can be seen easily.

   1. Click on the area Left.
   2. In the properties click the Styles tab.
      1. Fit to available space, Tick.
      2. In the Position Settings section:
         1. Remove the Width and Height.
   3. Click the area Right and repeat the steps above.
   4. Both areas will now be the same size and we are ready to move on, see check point below.

Check Point

Your screen will look like the following:

Construct the Left Area

1. Click the area Left.
2. Add the following CSS Properties.
   1. margin, 20px
      1. This is shorthand for placing 20px on all sides of the area. 
   2. minWidth, 320px.
   3. maxWidth, 350px.
   4. minHeight, 130px.
3. Click  Apply and Close to save your changes.
4. While adding the following items from the palette to the screen use Shift+Drag:
   1. From the Headers section, add a Screen - Header to the Left area.
      1. Name, Title.
   2. From the Buttons - Additional section, add a Landing - Primary to the Left area.
      1. Name, Option 1.
   3. From the Buttons - Additional section, add a second Landing - Primary to the Left area.
      1. Name, Option 2.
   4. It may be necessary to move your new items into a different location or order, use the layers section to achieve this and remember you only need to hold shift when moving an item into or out of an area.

Checkpoint

Your screen should look like this:

Configure the Title

We have selected a Screen Header for our title, lets's edit this to make it more suitable for our home screen.

1. In the layers pane click on the Left area which is under Tile Body.
   1. From the properties remove the background colour.
2. In the Layers pane, find your Title.
   1.  On the Style tab, change Justify to Center.
   2. Back in the layer pane, expand Title and click on the Left area,
      1. Click on the Icon.
         1. Click the Styles tab. 
         2. In the Position Settings set the Width and Height to both be 40px.
      2. Click on Header1Dynamic and in its properties:
         1. Change the Default Value to Companies.
         2. Click on the Styles tab:
            1. Font Size, 24.
            2. Font Weight, Lighter.
   3. In the layers pane under Title, delete the Right area.
      1. Right-click on it in the layers and select Permanently delete. Ensure you are deleting the Right area under the Title.
   4. Click  Apply and Close to save your changes. Changes may not show until we close and reopen the screen.

Configure the button Icons and Actions

1. In the layers pane click on Option 1.
   1. On the Styles tab, set the background image to be CompanyIcon.
   2. Using the layers pane click on its Label and set Display Text to Companies Data.
2. In the layers pane click on Option 2.
   1. On the Styles tab set the background image to be, IconFinance.
   2. Using the layers pane click on its Label and set Display Text to Orders.
3. From the Screens Toolbar, click  Screen:
   1. From the screen list which appears on the right, drag Companies List onto the Companies Data button.
   2. From the screen list on the right, drag Invoicing onto the Orders button.
4. Close and reopen the screen to ensure all changes are displayed.

Configure the Right Area

1. In the layers pane under TileBody, click the Right area.
2. In the properties remove the background colour.
3. Set Background Image to PSG_ImageSplashScreen.
4. Set Background Repeat to no-repeat.
5. Set Background Size to Cover.
6. We need to set a min height and width. The best practice would be to create a shared style with the following settings and use it on both the Left and Right areas.
   1. Create shared style and set:
      1. minWidth, 300px.
      2. minHeight, 130px.
   2. Add the shared style to the Right area.
   3. Add the shared style to the Left area and remove the CSS properties we are replacing.

Tile Tidy Up

1. In the layers pane, click on Tile Body.
2. In properties, click the Style tab.
3. Set the following:
   1. Wrap, Wrap Reverse.
      1. We use this as it will cause the image to go above the buttons. We could use Wrap if we wanted it to go below.
   2. Justify, Centre. 

Check Point

Your screen will look and behave as follows:

Add a Screen Close Button

1. From the Palette → Buttons - Screen Controls section, drag Close 2 onto the screen.
   1. Name, Close.
2. Use the layer section to position it above the Centre area.
3. When positioning items on a screen we use flexbox and have the content flow on the screen, this is known as relative positioning. However on rare occasions, we will need to position an item in a specific position, this is known as Absolute Positioning. It is set up as follows:
   1. In the properties of the Close 2 button, on the Styles tab in the Position Settings section set:
      1. Top, 0px
         1. Position the item x amount of pixels from the top.
      2. Right, 20px
         1. Position the item x amount of pixels from the right.
   2.  Apply your changes.

Add a Welcome Message

We will now add a welcome message that will get populated when the screen opens.

1. From the Palette → Headers section, drag a Tile Header onto the screen.
   1. We use a tile header as a starting point for our design.
   2. Name, Welcome.
2. In the properties of Welcome, on the Styles tab set:
   1. Justify, Center.
   2.  Apply your changes.
3. There are two parts to the header, static text and dynamic text. 
4. Click on the static text, this is called Header 2 Static. Here we set the static part of the welcome message.
   1. Set the Display Text to be, Hello,
   2.  Apply your changes.
5. Click on the dynamic text, this is called Header2Dynamic. Here we will remove the Default Value of the welcome message as it will be set by an actionflow later.
   1. Set the Default Value to be empty.
   2.  Apply your changes.
   3. The dynamic text value we will set using a Startup Action which we will cover in a later chapter.