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.

1. Additional options, such as

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

1. option; see Creating a Screen from

1. an ERD Table.
2. Drag a

1. Table from the repository or a tables icon from its properties directly onto a screen.

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

• Insert excerpt
  HELP90:_grid HELP90:_grid nopanel true

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

• Insert excerpt
  HELP90:_form HELP90:_form nopanel true

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

• Insert excerpt
  HELP90:_card HELP90:_card nopanel true

  : rather than using a form to display data, you can use a card.

• Insert excerpt
  HELP90:_chart HELP90:_chart nopanel true

  : attibutes are represented in different segments of a pie chart, with values aggregated to represent the segment size. 

• Insert excerpt
  HELP90:_graph_horizontal HELP90:_graph_horizontal nopanel true

  : attributes are represented on the vertical axis, with values aggregated and represented in the bar length.

• Insert excerpt
  HELP90:_graph_vertical HELP90:_graph_vertical nopanel true

  : attributes are represented on the horizonal axis, with values aggregated and represented in the bar height.

• Insert excerpt
  HELP90:_graph_line HELP90:_graph_line nopanel true

  : 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.
  Image Modified 

The red exclamation icon shows that a component has no data bound to it. When the component has data bound to it, the 

Click

Step

2 Select a

base table

1. Enter a name for the view.
2. Select a table from the list. This

1. 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. 
2. Click Next.
   PhixFlow creates a view and

1. opens its properties.

Step

3 Select attributes

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

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

   Insert excerpt
   HELP90:_attributes_show HELP90:_attributes_show nopanel true

   .
   
   
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 

     Insert excerpt
     HELP90:_more_options HELP90:_more_options nopanel true

      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