1.  section, drag a template package into your application's

1. properties Packages list.

Adding Content to a Screen

To add content to a screen, drag components and layouts from the 

Starting with a Complete Layout

Theme 2.1 has some complete screen layouts. These provide screen templates with different header-body-footer layouts, to which you can add more components. Open the palette → Theme 2.1 → Complete Screens and drag one of the layouts from the palette onto an empty screen canvas. 
 

     Image Added 

Adding Components

If you start with a complete layout, or create your own layout, drag components from the palette onto the screen canvas. For Start with container components then drag in components for headers, footers, buttons and labels.

When you drag components from the Theme 2.1 palette, PhixFlow highlights containers on the screen canvas where you can drop the component, as shown below. This is known as a Preferred Parent.

Adding Data Tables

You can also add content based on table data

Adding Data Tables

Image Removed

Adding Form Fields

1. To create form fields Table attributes can be added directly to a screen by dragging them from the tables Attributes section onto a screen. PhixFlow will automatically create the form fields based on the default style specified for your application.

Starting with a Template

1. If you have a blank screen and wish to start from a Template screen simply expand the Complete Screens section in a palette and drag the required item onto the screen.
   1. Image Removed

Drag from Locations

drag a data table onto the screen canvas to display its data.

1. Find the table you want to use:
   • either in the repository Tables list
   • or open its properties.
2. Drag the table icon onto the screen canvas.
   The screenshot below shows how to drag the table icon from the properties onto the canvas.
   
   Image Added
3. Select how you want to display the data, for example in a grid or chart.

Adding Form Fields

It is easy to create data display or data entry using fields on a form by dragging attributes onto the screen canvas:

1. Open the table properties.
2. Drag attributes from the Attributes section onto the screen canvas.
3. Enter a name for the field component.
4. PhixFlow automatically creates the form fields using on the default style specified for the type of data that the attribute represents. For example, a telephone number has a number field, whilst a name has a text field. The default styles are set in your application properties.

Understanding Default Styles

When you set up your application, it is important to: 

• either choose a template, which configures your default styles
• or to select default styles in the Application Properties.

This tells PhixFlow which component to use when you drag tables or attributes onto a screen canvas; see Understanding Template Packages. If you do not set a default style in your application, PhixFlow uses the styles set for the whole system in System Configuration.

 As discussed in  Screen Structure → moving layouts and components,

• Add next to an item: Dragging an item from the palette onto a screen creates a sibling relationship. For example, if you drag ad drop a form field on top of another form field they appear next to one other.
• Add inside an item: Holding shift and dragging an item from the palette onto a screen creates a parent child relationship, where your dragged item drops into the item you drop it on.

Preferred Parents, where a preferred parent is setup the dragged item will always drop into its preferred parent. For examples a Tile will always try and drop into a Tile Container.

Components Into or Next To Existing Content

When you drop a component, table or attribute onto a screen canvas, PhixFlow needs to know if you want to put the item into or next to any existing component in that location.

Where the palette component has a preferred parent configured, when you drag the component onto the screen canvas, PhixFlow highlights suitable containers; see Component Categories and Preferred Parents.

Palettes

Palette content is organised into logical groups (see Theme 2.1), with icons and descriptions to indicate their styling and purpose. At the top level are the pre-built screens such as*:

• Confirmation Screen: A complete screen designed to be used as a confirmation message or other binary option.
  
• Full Screens: A complete dashboard screen containing windows controls, a content area, a single tile with a header and CRUD buttons in a footer.
• Data Entry Forms: Data Entry form with centre alignment designed as a complete screen for data entry or a popup window.

•  a form or popup window for an application user to enter data.

If you require more control over the To make changes to a screen from the palette, or to design of your screen or want to edit or add to the pre-built screensown screen, use components such as:

• Tiles - come in various configurations from data entry tiles to google maps integrated variants. Drag these items into a Tile container to control their layout and produce a design that is device responsive.
• Headers - can be added to your screens to provide Headers: provide clarity and structure to the content on the screen , headers can be used and act as labels to divide a screen into logical sections.
• Footers - can be used to house : useful for the buttons to provide create, update and delete buttons that act upon your datafunctionality, so that the application user can make changes to data.
• Tiles: special layouts from data entry forms to Google maps. The container for a tile is configured so the components in the tile can shift their layout in response to the form-factor of the device on which your application is running; see Sizing and Positioning Screen Content.

Finding a Component

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

To find a component When you are working on a screen:

, it can be useful to see how a component fits into the

hierarchy layers.

You can see this more clearly in:

• either the 

  Insert excerpt
  _layers _layers nopanel true

   panel on the left of the screen canvas. To display the panel click the slider: 

  Insert excerpt
  _repositorylayer_findslider _repositorylayer_findslider nopanel true

  .
  PhixFlow opens the Components section with the component selected. You can then see how the selected component fits into the screen hierarchy.

• or in the repository Components section, in the right panel.

To highlight the component in the Layers panel or the repository, select it on the screen canvas.

To open the properties for a component:

• in the canvas right-click on the component and select Show Details
• In the Layers panel or repository click on its name and click 

  Insert excerpt
  _edit _edit nopanel true

  .

What's Next?