- Created by Anthony George, last modified on Feb 08, 2023
You are viewing an old version of this page. View the current version.
Compare with Current View Page History
« Previous Version 13 Current »
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.
- Create a new screen from the screen's home page.
- Name,
Home
. - Description, Application home screen
- Template, Blank.
- Scroll to the right and select Blank.
- Click Create Screen
- Name,
- The screen will open.
- Click in the middle to open the properties.
- Click the Styles tab.
- Scroll down to direction and set the following:
- Justify, Center
- Align, Center
- Save your changes.
Build Up the Centre Tile
- Add a Tile
- From the Palette drag a Blank - Row tile onto the screen.
- Name, Centre.
- Click Confirm.
- From the Palette drag a Blank - Row tile onto the screen.
- Open the properties for Centre.
- Click the Style tab.
- Untick
Auto Size
. - Add the following CSS Properties:
- Width,
75%
. - Height,
50%
. - minWidth,
350px
. - minHeght,
480px
.
- Width,
OK to save your changes.
- 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.
- Add the centre areas.
- We will use simple areas to build up our screen structure:
- From the Palette in the basic layouts, click on Area - Column and holding shift, drag it onto the screen.
- Name,
Left
.
- Name,
- Add a second Area - Column on the screen.
- Name,
Right
.
- Name,
By default, the areas have a simple style applied so they can be seen easily.
- Click on the area Left.
- In the properties click the Styles tab.
- Tick Auto Size.
- Scroll down to the Position Settings section.
- Remove the Width and Height.
- Click the area Right and repeat the steps above.
- 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
- Click the area Left.
- Add the following CSS Properties.
- margin, 20px
- This is shorthand for placing 20px on all sides of the area.
- minWidth, 320px.
- maxWidth, 350px.
- minHeight, 130px.
- margin, 20px
- Click OK to save your changes.
- While adding the following items from the palette to the screen use Shift+Drag:
- From the Headers section, add a Screen - Header to the Left area.
- Name,
Title
.
- Name,
- From the Buttons - Additional section, add a Landing - Primary to the Left area.
- Name,
Option 1
.
- Name,
- From the Buttons - Additional section, add a second Landing - Primary to the Left area.
- Name,
Option 2
.
- Name,
- 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.
- From the Headers section, add a Screen - Header to the Left 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.
- In the layers pane click on the Left area which is under Tile Body.
- From the properties remove the background colour.
- In the Layers pane, find your Title.
- On the Style tab, change Justify to
Center
. - Back in the layer pane, expand Title and click on the Left area,
- Click on the Icon.
- Click the Styles tab.
- In the Position Settings set the Width and Height to both be
40px
.
- Click on Header1Dynamic and in its properties:
- Change the Default Value to
Companies
. - Click on the Styles tab:
- Font Size,
24
. - Font Weight,
Lighter
.
- Font Size,
- Change the Default Value to
- Click on the Icon.
- In the layers pane under Title, delete the Right area.
- Right-click on it in the layers and select Permanently delete. Ensure you are deleting the Right area under the Title.
- Click OK to save your changes. Changes may not show until we close and reopen the screen.
- On the Style tab, change Justify to
Configure the button Icons and Actions
- In the layers pane click on Option 1.
- On the Styles tab, set the background image to be
CompanyIcon
. - Using the layers pane click on its Label and set Display Text to
Companies Data.
- On the Styles tab, set the background image to be
- In the layers pane click on Option 2.
- On the Styles tab set the background image to be,
IconFinance
. - Using the layers pane click on its Label and set Display Text to
Orders.
- On the Styles tab set the background image to be,
- From the Screens Toolbar, click Screen:
- From the screen list which appears on the right, drag Companies List onto the Companies List button.
- From the screen list on the right, drag Invoicing onto the Company Orders button.
- Close and reopen the screen to ensure all changes are displayed.
Configure the Right Area
- In the layers pane under TileBody, click the Right area.
- In the properties remove the background colour.
- Set Background Image to
PSG_ImageSplashScreen
. - Set Background Repeat to
no-repeat
. - Set Background Size to
Cover
. - 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.
- Create shared style and set:
- minWidth,
300px.
- minHeight
, 130px.
- minWidth,
- Add the shared style to the Right area.
- Add the shared style to the Left area and remove the CSS properties we are replacing.
- Create shared style and set:
Tile Tidy Up
- In the layers pane, click on Tile Body.
- In properties, click the Style tab.
- Set the following:
- Wrap,
Wrap Reverse
.- 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.
- Justify,
Centre
.
- Wrap,
Check Point
Your screen will look and behave as follows:
Add a Screen Close Button
- From the Palette → Buttons Additional section, drag Close 2 onto the screen.
- Use the layer section to position it above the Centre area.
- 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:
- In the properties of the Close 2 button, on the Styles tab in the Position Settings section set:
- Name,
Close.
- Top,
0px
- Position the item x amount of pixels from the top.
- Right,
20px
- Position the item x amount of pixels from the right.
- Name,
- Save your changes.
- In the properties of the Close 2 button, on the Styles tab in the Position Settings section set:
Add a Welcome Message
We will now add a welcome message that will get populated when the screen opens.
- From the Palette → Headers section, drag a Tile Header onto the screen.
- We use a tile header as a starting point for our design.
- Name,
Welcome
.
- In the properties of Welcome, on the Styles tab set:
- Justify,
Center
. - Save your changes.
- Justify,
- There are two parts to the header, static text and dynamic text.
- Click on the static text, this is called Header 2 Static. Here we set the static part of the welcome message.
- Set the Display Text to be,
Hello,
- Save your changes.
- Set the Display Text to be,
- 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.
- Set the Default Value to be empty.
- Save your changes.
- The dynamic text value we will set using a Startup Action which we will cover in a later chapter.
- No labels