Creating Screens from the Home page

1. From your application's Home page, click

   Insert excerpt
   _screen _screen nopanel true

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

   Insert excerpt
   _add _add nopanel true

    and enter the following details:
   
   1. Name, Companies List.
   2. Open Maximised, leave this toggled on as we want our screen to use all available space.
   3. All users can View Data, leave this toggled on as we want our screen to be available to all users of our application.
      1. Note: If this is toggled off only selected user groups will be allowed to view the screen. See Managing User Groups and Privileges
   4. Description, set this to be, A complete list of all companies.
   5. Please select a Template, click on Tile with Buttons.
      1. There are a selection of templates to choose from, and we will explore these throughout the course. Right-click on each one and select Display to see a preview of each template. The template we have selected here has the most options and will be useful for displaying and interacting with data. 
   6. Click Create Screen.
4. 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

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged by 

Insert excerpt
_layers _layers nopanel true

. 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. 

Components

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

Expand
title Basic Components
The basic components are: Component Description Examples Containers Containers are designed to hold other components area form card container Data Fields Data fields are designed to display data from an attribute. true/false field date field date-time field number field string field URL display drop-down fixed drop-down Text Fields Text fields are designed to be labels. dynamic text: text varies depends on backing data. static text: you specify the text you want to appear Data Components 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 one of the examples on the right. grid pie chart line graph horizontal bar graph vertical bar graph card

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).

Expand
title Example Layout
For example, a simple layout for a tile is illustrated below: Tile is an area with styling to control its size and the layout of its child components. Header is an area which contains an icon and a static text field for the header. Body is where you can add content, such as a grid displaying table data, or form fields. The body area has the styling to control its size and the layout of its child components. It also has spacing around its edge. Footer is an area which contains a set of buttons. The application user will use the buttons to interact with the data, such as editing and deleting records.

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: 

Excerpt

Understanding the Screen Menus The options for components on a screen can be found by: Clicking on the component to display the  Insert excerpt _property_tabs _property_tabs nopanel true  on the right, including the  Insert excerpt _property_tabs _property_tabs name style nopanel true   The properties show for the component outlined in blue on the canvas When a component is inside another component, click until the desired component outlines in blue Image Modified Hovering over the component on the screen to display the  Insert excerpt _pen_floating _pen_floating name pink nopanel true  icon, which turns blue when clicked,  Insert excerpt _pen_floating _pen_floating name blue nopanel true , and displays the floating menu The floating menu can also be accessed in the  Insert excerpt _layers _layers nopanel true Image Modified Right-clicking on a component to display options such as adding and changing a backing attribute, and changing the template The right-click menu can also be accessed in the  Insert excerpt _layers _layers nopanel true Image Modified Floating Menu The interactive floating menu appears on components on mouseover. It is available on screens when Insert excerpt _unlock _unlock nopanel true ed in Insert excerpt _design_mode _design_mode nopanel true  and provides quick access to key tasks, including accessing styles, field validation and defining backing data.  The options available on the floating menu change depending on the type of object, but will always show the most commonly used properties, such as Insert excerpt _lock _lock nopanel true / Insert excerpt _unlock _unlock nopanel true .  Image Modified Right-Click Menu The right-click menu contain global options, such as  Insert excerpt _element_show _element_show nopanel true , and options relevant to the component. Image Modified