Creating Screens from the Home page

1. From your applications application's Home page click Screens

   Insert excerpt
   _screen _screen nopanel true

   .
2. A list of all the screen screens in your application will open.
3. Click 

   Insert excerpt
   _add _add nopanel true

   Provide the  and enter the following details:
   
   1. Name, Companies List.
   Leave
   1. Open Maximised, leave this ticked as we want our screen to use all available space.
   2. Description, set this to be, A complete list of all companies.
   3. Please select a Template, click on Tile with Buttons.
      1. There
      are 
      1. are a selection of templates to choose from, and we will explore these throughout the course. Hover over the templates to find out more about each one. The template we have selected here has the most options and will be useful for displaying and interacting with data. 
   4. Click Create Screen.
4. Your The screen will be created and will automatically open. Note this can take a little while as the html and css are generated for the screen.

Screen Structure

1. Header
   1. Windows controls
   2. Headers
2. Body
   1. Tile Container
   2. Tiles

• Footer
  1. Buttons

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.

Styles 

explanation

Style Hierarchy

1. Application Styles
2. Shared Style
3. Local Styles
4. Formatting Rules
5. Overriding Styles Best Practice
6. Clearing Styles

Creating Screens from the Home page

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.

Adding Content

1. Preferred Parent Highlighting
2. Adding Tiles
   1. Tile Types
3. Editing Headers
4. Editing Footers
5. Moving Content on the Screen
   1. Shift or not to Shift

Adding Data as a Grid

Adding Data as a Card Container

1. The Container
   1. Table
   2. View
   3. Filtering
2. The Cards
   1. Design and App mode display.
   2. Adding filters dynamically
3. Changing the backing attributes

Adding a Chart

1. Simple Setup
2. Colour Maps
3. Link to setting up more chart types.

Data Type and Formatting

Before we begin adding data and editing the look and feel, we will first look at the structure of the screen. This is beneficial as this knowledge will make editing the screen easier to understand. 

Screen Structure

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged by layers. Components are things like areas, static text labels and form fields, which display data from a table. Multiple components are combined into layouts, such as a label and a field, or more complex parts of a screen with responsive design such as a card or tile. 

Layers

A typical screen has a layered structure, in which one layer is the parent of another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to the screen of the device it is being viewed on. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Image Added

Components

Components are the most basic building blocks that are combined to design a screen. They are available from any palette.

Layouts

Layouts are groups of pre-configured components. You can create these yourself by combining components or you can use the layouts from a palette (recommended).