Overview

One of the main purposes of a screen is to enable users to interact with data. To give you full control over the data that will be displayed PhixFlow uses data views contain:

1. Attributes from the primary table and optionally related tables.
2. Filters and sort orders that affect how records are displayed.
3. Additional options, such as hiding attributes on the screen.

There are several ways to show data on a screen:

1. From  an Entity Relationship Diagram (ERD), select a table and use the Create Screen option; see Creating a Screen from an ERD Table.
2. Drag a Table from the repository or a tables icon from its properties directly onto a screen.
   1. A list of available tables is available by clicking the Tables button on the toolbar.
   2. See Creating Dashboards and Reports for more infromation.
   3. This method typically set the data for the backing form to that of the table.
3. Create a view directly on a table and drag this view onto a screen.
   1. This method means you define the view type ahead of time and the data backing the form is not set. This means you can display data from multiple tables.

More Information:

• tables, relationships and ERD; see Understanding ERDs.
• views; see Displaying Data (Views).

Data Components

PhixFlow requires data for the following components. These are available from the Data Bound palette.

•  Grid: the attributes form the grid columns and data records are displayed in rows. PhixFlow can add scroll bars or paging where grids cannot be accommodated by the screen size.
•  Form: attributes are represented by different fields. Usually a form is linked to an action on a grid. For example, the application user selects a line on a grid, and the form displays the data from that record.
•   Card: rather than using a form to display data, you can use a card.
•   Pie Chart: attibutes are represented in different segments of a pie chart, with values aggregated to represent the segment size. 
•   Horizontal Bar Chart: attributes are represented on the vertical axis, with values aggregated and represented in the bar length.
•   Vertical Bar Chart: attributes are represented on the horizonal axis, with values aggregated and represented in the bar height.
•   Line Graph: attributes are represented as points on a horizontal axis, with values aggregated and setting the point position on the vertical axis.

Form and card components are special data components, as they can contain other elements, usually fields and labels.

How to Bind Data to a Component

Step 1 Start

• Either drag a data component from the palette onto the canvas.
• Or, on the canvas, select a component to which you want to bind data to show the pop-up toolbar. This is usually an area component that will become a parent component.
   

The red exclamation icon shows that a component has no data bound to it. When the component has data bound to it, the  Show Attributesand  Filtericons become available.

Click  Bind to Data.

Step 2 Select a base table

1. Enter a name for the view.
2. Select a table from the list. This is now the base table for the data view.
    To find the view in the repository, expand this table to see its associated views. 
   Alternatively, create a new table. 
3. Click Next.
   PhixFlow creates a view and opens its properties.

Step 3 Select attributes

PhixFlow shows the Attribute Selection window, which has two parts:

• on the left: the current table, which is the base table for the view, and a list of related table
• on the right: attributes from the selected table.

From the current, base table, drag attributes from the list onto the screen.

Optionally, on the left, select related tables and drag attributes from their list onto the screen. These related attributes are added to the view.

• To select all attributes:
  1.  Tick attributes you want to be available in the view.
  2. Optionally, click on related tables to show additional attributes that are available. 
     Again, tick the attributes you want to be available. 
  3. Drag attributes into the screen, either into a parent area or empty data component.
  4. PhixFlow adds all the attributes to the data component.
• To select attributes from different tables individually
  1. Drag attributes from the parent table list onto screen parent area or data component.
  2. Optionally, click on related tables to show additional attributes that are available. Again, drag attributes onto the parent area.
  3. As you add attributes to the data component, PhixFlow ticks them. 

Where layouts and components have Preferred Parent Categories configured, as you drag attributes over a screen, PhixFlow highlights components to which you can bind data. This shows where you can drop attributes; see Component properties.

When you have added all the attributes you require, click Next.

Step 4 Select the data component

When you start by dragging a data component from the palette, or you drag onto an existing data component, PhixFlow knows how what type of view you are creating. 

When you start by dragging an attribute onto a container component, such as an area, PhixFlow does not know what type of data view you want. In this case, when you drop the attribute, PhixFlow prompts you to select the type.

Click an option to add a component for a grid, graph, chart or card. The view component is:

• bound to the data view
• added to the parent component
• sized to fit the available space in the parent component. 

For Form views, PhixFlow also adds data fields to the form, which display the attribute being dropped.

Step 5 Apply filtering and sorting for records

You have now created a data component and it is bound to data. Optionally, specify if you want to apply or create filters or sort orders to determine which data records appear in the data component; see Filtering and Sorting Data.

Step 6  Click Finish.

Form Field Names

When you drag attributes from the Attribute Selection window onto a form, PhixFlow adds a field and label for each attribute. By default, the label is the attribute's name. However, for an attribute in a related table, this depends on the Display Name option. For example:

Primary key  →  Foreign key
table.attribute  →  related-table.attribute
Company.UID  → Supplier.Company-Name 

Where Supplier.Company-Name has Display Name:

• selected, PhixFlow uses "Company-Name" as the label.
• not selected, PhixFlow uses "UID" as the label.

For information about primary and foreign keys and the Display Name option; see Understanding ERDs.

Editing Data-bound Components

To make changes to the attributes in your view you can:

• Edit the view properties. 
• Reopen the Attribute Selection window.

View Properties

1. Select the component
2. Right-click to show the context menu
3. Click Show properties.

Change name, type, filters, sort, add or remove attributes, hide attributes

For example you may want some data to be available for calculations and actions but not be visible to users. You can hide these attributes. 

Changing the Data-binding on a Component

To change the data binding on a component you can uses its properties or its Attribute Selection window.

Component Properties

1. Right-click on the component and select Show Properties. 
2. The properties include the name of the attribute that is backing it. You can select a different attribute.
3. You can also change other details, such as the display name.

See Attribute for details.

Attribute Selection Window

1. Select the component.
2. In the pop-up toolbar, click  Show Attributes.
   
   
3. PhixFlow opes the Attribute Selection window for this component.
4. Either use the tick boxes to add or remove attributes from the view.
   And/or drag attributes onto a component, such as a grid or field. When the component is:
   • not yet bound to data, PhixFlow adds the data binding to the attribute
   • is already bound to data, PhixFlow asks you to confirm that you want to make the change.

Passing Data to Another Screen

Sometimes, a data-backed component has an action that will pass data on to another screen. For example, if you need an application user to edit the data displayed in a grid, you can create a simple pop-up editor form. The data that is passed is called the driving data.

1. Right-click the data-backed component (e.g. a grid) and select Create Editor
   • Alternatively, in the component's properties, click  More Options and select Create Editor.
2. PhixFlow displays a set of simple form templates for you to select from. 
3. Select an event, such as on-click. When the user does this, the pop-up will open.
4. Select the attributes that you want to pass to the new pop-up window. (Background filter applied)
5. In the background, PhixFlow creates and actionflow. The actionflow takes the UID from the data-backed component and then passes to the new window, to populate the fields.

Where is this Data Coming From?

To find out where a component is getting its data:

1. Right-click on the component and select Show attributes for view: 
2. In the list, double-click on an attribute name to open its properties. 
3. In the Attribute Source section, the information about the data source is in the following fields.

• Source attribute
• Type
• Source Table
• Displayed Attribute
• Displayed Attribute Table