Introduction

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

HERE

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 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. Click in the middle to open the properties.
   1. Click the Styles tab.
   2. Scroll down to direction and set the following:
      1. Justify, Center
      2. Align, Center

   3. Insert excerpt
      _save _save nopanel true

       your changes.

Build Up the Centre Tile

1. Add a Tile
   1. From the Palette drag a Blank - Row tile onto the screen.
   2. Name, Centre.
   3. Click Confirm.
2. Open the properties for Centre.
   1. Click the Style tab.
   2. Add the following CSS Properties:

   3. Image Added

   4. Untick Auto Size.

3. Insert excerpt
   _finish _finish nopanel true

    to save your changes.
   1. This invokes a screen update. If you do not see the changes you make, close and reopen the screen.
4. Add the centre areas. We will use simple areas to build up our screen structure:
   1. From the Palette in the basic layouts, click on Area - Column and holding shift drag it onto the screen.
      1. Name, Left.
   2. Add a second Area - Column onto 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. Tick Auto Size.
      2. Scroll down to 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.

Check Point

Your screen will look like the following:

Image Added

Construct the Left Area

1. Click the area Left.
2. Add the following CSS Properties.
   1. Margin, 20px
      1. This is short hand for placing 20px on all sides of the area. 
   2. minWidth, 320px
   3. minHeight, 250px
3. Untick Auto Size.
4. Click 

   Insert excerpt
   _finish _finish nopanel true

    to save your changes.
5. For 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 achieved 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:

Image Added

Configure the Title

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

1. In the Layers section click on the Left area which is under Tile Body.
   1. From the properties remove the background colour.
2. In the Layers section, find your Title.
   1.  In its style settings, change Justify to Center.
   2. Back in the Layer, 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 List.
         2. Click on the Styles tab:
            1. Font Size, 24.
            2. Font Weight, Lighter.
   3. In the Layers section delete the Right area under Title.
      1. Right click on it in the Layers and select Permanently delete. Ensure you are deleting the Right area under the Title.
   4. Click 

      Insert excerpt
      _finish _finish nopanel true

       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 section click on Option 1.
   1. On the Styles tab set the background image to be, CompanyIcon.
   2. Using the Layers section click on its Label and set Display Text to Companies List.
2. In the layers section click on Option 2.
   1. On the Styles tab set the background image to be, IconFinance.
   2. Using the Layers section click on its Label and set Display Text to Company Orders.
3. From the Screens Toolbar, click 

   Insert excerpt
   _screen_toolbar _screen_toolbar nopanel true

   1. From the screen list which appears on the right, drag Companies List onto the Companies List button.
   2. From the screen list on the right, drag Invoicing onto the Company Orders button.
4. Close and reopen the screen to ensure all changes are displayed.

Configure the Right Area

1. In Layers click the Right Area, under TileBody.
2. In the properties remove the background colour.
3. Set Background Image to PSG_ImageSplashScreen.
4. Set Background Repeat to no-repeat.

Add a Close

Add a Welcome Message

Editing Common Objects

1. Change an Icon

   1. Invoicing

2. Change a Header

   Change the size of a Tile
   1. Dynamic text and static text

Adding basic Components

1. Areas

2. Images

3. Static Text

4. Dynamic Test

5.  Buttons
   1. Areas general
   2. Areas for building up groups
   3. Field containers

6. Images

   1. Add an area an set a background image on a splash screen.

7. Buttons

   1. Add Action

   2. Drag a screen onto a screen

8. URL Component

9. Changing Templates

10.  FieldsFields

    1. Hidden Fields

11. Dropdown Fields

    1. Auto Creation from Relational Views

    2. Manually Created