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

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.

• Insert excerpt
  _grid _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 accomodated by the screen size.

• Insert excerpt
  _form _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
  _card _card nopanel true

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

• Insert excerpt
  _chart _chart nopanel true

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

• Insert excerpt
  _graph_horizontal _graph_horizontal nopanel true

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

• Insert excerpt
  _graph_vertical _graph_vertical nopanel true

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

• Insert excerpt
  _graph_line _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 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

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

Image Modified

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

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

   Insert excerpt
   _attributes_show _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
     _more_options _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 Stream 
• Displayed Attribute
• Displayed Attribute Stream