This page explains the concepts and how to display data on all or part of a screen.
Overview
One of the main purposes of an application screen is to enable the user to interact with data. Commonly data is displayed either in a grid, which lists records, or on a form, which has details from one record. The user may need to add, change or delete a record, or part of it. In PhixFlow it is easy to connect parts of a screen to data.
To give you full control over the set of data that will be displayed to users, PhixFlow has the concept of a data view. This is:
- a set of attributes either from one table or from several related tables
- the filters and sort orders that affect how records are displayed
- additional options, such as whether or not an attribute appears on the screen.
There are several ways to bind a view to a screen or component.
- Start in an ERD, select a table and use the Screen Create option; see Creating a Screen from a TableStream.
- Drag a data component, such as a grid or chart from the palette into a screen.
- Select a component on the screen to show its pop-up data toolbar
then click
.Insert excerpt _data_bind _data_bind nopanel true
For example, it can be useful to bind data to an area component so that all its child components can access the same data.
If you add components such as form fields before binding any data to them, PhixFlow marks them with a broken link
When you are starting with data, PhixFlow binds the data to screen components by guiding you through the process of creating a view, then selecting specific attributes to display.
| Tip |
|---|
Components that show the data from a view are sometimes called a data-bound components or are described as having backing data. They are indicated with a link icon |
For more information about:
- tables, relationships and ERD; see Understanding ERDs and Views.
- views, see Compiling Views.
| Live Search | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Data Components
PhixFlow requires data for the following components. These are available from the Data Bound palette.
: the attributes form the grid columns and data records are displayed in rows. PhixFlow can add scroll bars or paging where grids cannot be accomodated by the screen size.Insert excerpt _grid _grid 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 _form _form nopanel true
: rather than using a form to display data, you can use a card.Insert excerpt _card _card nopanel true
: attibutes are represented in different segments of a pie chart, with values aggregated to represent the segment size.Insert excerpt _chart _chart nopanel true
: attributes are represented on the vertical axis, with values aggregated and represented in the bar length.Insert excerpt _graph_horizontal _graph_horizontal nopanel true
: attributes are represented on the horizonal axis, with values aggregated and represented in the bar height.Insert excerpt _graph_vertical _graph_vertical nopanel true
: attributes are represented as points on a horizontal axis, with values aggregated and setting the point position on the vertical axis.Insert excerpt _graph_line _graph_line nopanel true
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
and Insert excerpt _attributes_show _attributes_show nopanel true
icons become available.Insert excerpt _filter _filter nopanel true
Click
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Step 2 Select a parent table
- Enter a name for the view.
- Select a table from the list. This table forms the basis for the data view.
Alternatively, create a new table. - Click Next.
PhixFlow creates a view and open's its properties.
Step 3 Select attributes
| Excerpt |
|---|
PhixFlow shows the Attribute Selection window, which has 2 panels:
From the parent table, drag attributes from the list onto the screen. Optionally, on the left, select related tables and drag attributes from the list onto the screen. These related attributes are added to the view.
As you drag attributes, PhixFlow highlights the component you are binding to data, where you can drop attributes. |
When you have added all the attributes you require, click Next.
On the left, select the parent table or a related table. On the right, select attributes, or drag them onto the screen canvas.
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 an area or container, PhixFlow does not know the view type. 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, which will fit the available space in the parent component. Select Form to set the parent as a form component, which is bound to the data view. PhixFlow adds a field to 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 create or apply any filters or sort orders to the data records; see Filtering and Sorting Data.
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 and Views.
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
- Select the component
- Right-click to show the context menu
- 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
- Right-click on the component and select Show Properties.
- The properties include the name of the attribute that is backing it. You can select a different attribute.
- You can also change other details, such as the display name.
See Attributes for details.
Attribute Selection Window
- Select the component.
- In the pop-up toolbar, click
.Insert excerpt _attributes_show _attributes_show nopanel true - PhixFlow opes the Attribute Selection window for this component.
- 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.
| Note |
|---|
In some cases you can an attribute drag from an Attribute Selection window onto a component that is not backed by it's view. PhixFlow will accept changes to a component in the following cases.
|
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.
- Right-click the data-backed component (e.g. a grid) and select Create Editor
- Alternatively, in the component's properties, click
and select Create Editor.Insert excerpt _more_options _more_options nopanel true
- Alternatively, in the component's properties, click
- PhixFlow displays a set of simple form templates for you to select from.
- Select an event, such as on-click. When the user does this, the pop-up will open.
- Select the attributes that you want to pass to the new pop-up window. (Background filter applied)
- 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:
- Right-click on the component and select Show attributes for view:
- In the list, double-click on an attribute name to open its properties.
- 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