Versions Compared

Version Old Version 3 New Version 4
Changes made by

Anthony George

Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue


Creating Screens from the Home page

  1. From your applications Home page click Screens.
  2. A list of all the screen screens in your application will open.
  3. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
    Provide  and enter the following details:
    1. the Name, Companies List.
    2. Leave Open Maximised ticked as we want our screen to use all available space.
    3. Description, set this to be, A complete list of all companies.
    4. Please select a Template, click on Tile with Buttons.
      1. There are  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.
    5. 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.


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

  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

  • The Grid
    1. Use Custom Data Range
  • The View
    1. Periods
    2. Inheriting the period from the table.
  • The Table
    1. Table Period.
    • Combined filteringDoes the grid setting override the view????
  • CRUD Buttons
    1. Adding Crud buttons after prompt.
  •  Attributes
    1. Adding attributes
    2. Relational Attributes
    3. Reordering Attributes
    4. Hiding Attributes
    5. Conditionally Hiding Attributes.
  • Styling a Grid
    1. Basics
      1. Bold Text
    2. Available Styling i.e. default styles.
    3. Conditional Formatting Background Colour
      1. Cell and Row.
    4. Removing the Title
    5. Labelling and double header?
    6. Link to in depth How To guide
  • In grid editing, link to how to.

    • 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

  • Date
  • Date-Time
    • Numbers

    A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are areas, static text labels and fields, which display data from a table. Multi-component layouts can be simple, such a a label and a field, or more complex parts of a screen with responsive design, these are called tiles. 

    Layers

    A typical screen has a layered structure, in which one layer is the parents for another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to both desktop and mobile devices. 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.

    Components are available from any palette.

    The basic components are:

    Containers

    Data Fields

    Text Fields

    Data Components

    Containers are designed to hold other components

    Data fields are designed to display data from an attribute.

    Text fields are designed to be labels.

    Data components may not be available on the palette. Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a:

    • area
    • form
    • card container
    • true/false field
    • date field
    • date-time field
    • number field
    • string field
    • URL display
    • drop-down
    • fixed drop-down
    • dynamic text: text varies depends on backing data.
    • static text: you specify the text you want to appear
    • grid
    • pie chart
    • line graph
    • horizontal bar graph
    • vertical bar graph
    • card

    Layouts

    Layouts are groups of preconfigured components. You can create these yourself by combining components or you can use the layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:

    • Tile is an area container with styling to control its size and the layout of its child components.
      • Header is an area which contains
        • an icon 
        • a static text text field for the header.
      • Body, in the illustration, the body area is empty. This is where you can add data components, such as a grid displaying table data, or form fields. The body area has styling to control its size and the layout of its child components. It also has spacing around its edge.
      • Footer, area which contains a set of buttons. 
        The application user will use the buttons to make changes to data will appear in the body.

    Image Added