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 stream or from several related streams 
• 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 stream and use the Screen Create option; see Creating a Screen from a Stream.
• 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 
  Error rendering macro 'excerpt-include' : No link could be created for '_data_bind'.
  .
  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.

For more information about:

• streams, relationships and ERD; see Understanding ERDs and Views.
• views, see Compiling Views.

Data Components

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

• Error rendering macro 'excerpt-include' : No link could be created for '_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 accomodated by the screen size.
• Error rendering macro 'excerpt-include' : No link could be created for '_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.
• Error rendering macro 'excerpt-include' : No link could be created for '_card'.
  : rather than using a form to display data, you can use a card.
• Error rendering macro 'excerpt-include' : No link could be created for '_chart'.
  : attibutes are represented in different segments of a pie chart, with values aggregated to represent the segment size. 
• Error rendering macro 'excerpt-include' : No link could be created for '_graph_horizontal'.
  : attributes are represented on the vertical axis, with values aggregated and represented in the bar length.
• Error rendering macro 'excerpt-include' : No link could be created for '_graph_vertical'.
  : attributes are represented on the horizonal axis, with values aggregated and represented in the bar height.
• Error rendering macro 'excerpt-include' : No link could be created for '_graph_line'.
  : 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 

Click

Step 2  Select a parent stream

1. Enter a name for the view.
2. Select a stream from the list. This stream forms the basis for the data view.
   Alternatively, create a new stream. 
3. Click Next.
   PhixFlow creates a view and open's its properties.

Step 3  Select attributes

PhixFlow shows the Attribute Selection window, which has 2 panels:

• on the left: the parent stream, or you can select related stream
• on the right: attributes from the selected stream.

From the parent stream, drag attributes from the list onto the screen.

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

• Either select multiple attributes:
  1.  Tick the parent stream attributes you want to be available in the view.
  2. Optionally, click on related streams to show additional attributes that are available.  Again, tick the attributes you want to be available. 
  3. Drag attributes into the parent area, or empty data component.
  4. PhixFlow adds all the attributes to the data component.
• Or select attributes individually
  1. Drag attributes from the parent stream list onto the parent area.
  2. Optionally, click on related streams 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. 

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 stream or a related stream. 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 stream, this depends on the Display Name option. For example:

Primary key         →   Foreign key
stream.attribute     →   related-stream.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

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 Attributes for details.

Attribute Selection Window

1. Select the component.
2. In the pop-up toolbar, click
   Error rendering macro 'excerpt-include' : No link could be created for '_attributes_show'.
   .
   
   
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 
     Error rendering macro 'excerpt-include' : No link could be created for '_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 Stream 
• Displayed Attribute
• Displayed Attribute Stream