This page is is for application designers who need to create forms. It explains techniques for associating label text with a data field.

Overview

PhixFlow has different components that you can use to add text to a screen. 

• For specific text that you want to show on a screen, use static text.
• For the labels on data fields, use labelled fields.
• For a clean form, where an empty field displays its name or instructions to the user, use the field properties for place holder text.
• For text that changes depending on a selected record, use dynamic text.

When you are designing a form on a dashboard, first add a form component. The form component is the container for all the data fields and labels; see Screen Structure. You bind the form component to a stream or view; see Showing Data on a Screen. This tells PhixFlow what attributes are available to display in data fields or labels. 

Opening the List of Attributes

To open the list of available attributes for a form component:

• either right-click on the form in the dashboard and select  Show Attributes

• or open the properties tab for a stream or view and expand the Attributes section.

Adding Static Text

Use a static text component to add your own text to a dashboard. This is useful for headings, button names or instructions that you want the screen to display.

To add a static text field:

1. From the palette, drag a static text field component onto a form container.

2. In the properties, in Basic Settings → Display Text, enter the fixed text you want to appear.

3. Use the Style Settings section to format the text. For example, you can specify the text colour or select bold formatting.

4. Save your changes.

Creating Labelled Fields

A form is made up of data fields that display data. The application user can add new data or edit existing data in the fields.

To create a data field with its associated label, create labelled field:

• either by starting with data
• or by starting with components from the palette.

A lablled field is a simple, grouped, layout. The name of the labelled field binds it to an attribute with the same name; see Understanding Labelled Fields, below.

We recommend starting with data, as PhixFlow automatically:

• chooses a component that matches the attribute's data type
• names the components
• binds the field to the attribute.

Starting with Data

1. In the dashboard or dashboard element, to add a form container, right-click and select  Create New Form.
2. From a list of attributes, drag an attribute onto the form container. 
3. For the first attribute you add, PhixFlow asks you to confirm that you want to bind this form container to the stream or view.
4. PhixFlow recognises that you want to add fields to a form. It adds a labelled field component designed to display the attributes data.

PhixFlow uses the default labelled field, which is set in the Application Properties properties or in System Configuration.

Where the attribute name is a good reflection of it's data, you can use this to add a label. To change the label to something that is more helpful to the application user:

1. Click on the data field, then click again to select the label. PhixFlow opens the label's property tab.
2. In Basic Settings change the Display Text, then save your changes.

You cannot drop an attribute directly onto a dashboard, dashboard element or area as PhixFlow does not know what type of component you want to add.

The default component to use when you drag attributes onto a dashboard are set in the Application Properties properties or in System Configuration.

Dragging an attribute to create a labelled field

Starting with Components from the Palette

1. In the dashboard or dashboard element, to add a form container, right-click and select  Create New Form. The form container has not data bound to it.

2. If the palette tab is not shown on the right, in the dashboard toolbar, click the  Palette icon.

3. Expand a palette that has field or labelled field components, such as:

   • Basic Components
   • Labelled Fields
   • Theme 1 - App Builder Base Components
   • Theme 2 - App Builder Base Components

4. Drag components onto a form container.

   Select a field or labelled field that matches the type of data that it will display.

5. Enter a name so that PhixFlow can save the component to the repository. For labelled fields, enter a name that reflects the label you want to see on the dashboard.

6. Bind the form container to a stream or view; see Showing Data on a Screen.

7. For each labelled field, rename the area to be the same as the name of an attribute in the backing data.
   PhixFlow automatically renames the data field and displays its data. The label remains unchanged.

You have to change the labelled field name to bind it to an attribute. If you drag an attribute onto an existing labelled field, PhixFlow adds a new labelled field for the attribute. 

Basic Components: individual data field and text components

Understanding Labelled Fields

Components

A labelled field is made up of:

• an area that contains:
  • a static text field
  • a data field that displays data from the attribute.

Naming

PhixFlow uses the same text for:

• the area name
• the data field name
• the static text Basic Settings → Display Text.

When you start with data, the text is the name of the attribute.
When you start with a labelled field from the palette, the text is the name you give the component.

PhixFlow binds the labelled field to an attribute with the same name, when one is present in the backing stream or view.

Labelled fields: a composite component comprising a data field and a static text field

Illustration

The following screenshot shows the different components in a labelled field.

• The orange box highlights the containing area.
• The top green box highlights static text field, which has the Display text Name.
• The bottom green box is a data field, in this case for a string.

The components are grouped together. If you drag one on the dashboard, all three components move. 

You can also see the same structure in the repository Layouts list. Right-click on a component and select  Show in repository. 

Properties

The area for a labelled field has the properties:

• Basic Settings → Composite Component ticked.
  This groups the child components together. If you drag the data field, the text field moves with it: see Grouping Components.
• Advanced → View Type: Field container, to link the component with an attribute.
  When the area or data field name is the same as an attribute in the backing stream or view, PhixFlow display the attribute data in the field.

Changing Names and Labels

If you change the name of either the data field or the area, PhixFlow automatically:

• updates the name of the other component, so the names always match
• looks in the backing data for an attribute with the same name
• displays data from the attribute, if there is one that matches.

The static text field is called Label. Edit the static text properties to change it's name or the Display Text.

To add additional static or dynamic text fields to a labelled field; see Changing a Labelled Field, below.

Changing a Labelled Field

You may want to add another component to a labelled field. For example, you could add:

• a static text component, to explain what the user can do.
• a dynamic text component, to show information from a selected record.

However, the property View Type Field container prevents additional components being added to the container. To add another text field:

1. From the palette, drag a static text or dynamic text component onto a form container.

2. In the dashboard right-click the existing labelled field and select  Find in Repository.

3. PhixFlow opens the repository listing Layouts. In the layouts list, find the container for the labelled field and double-click it to open its properties.

4. In the Advanced section, the View Type is set to Field container. Expand the drop-down list and select the empty row. 

5.  Save the properties. This "opens" the container so you can add more components to it.

6. In the layouts list, shift-click and drag the new text component into the container. PhixFlow moves your component to be a child of the container.

7. Remember

   Go back to the container properties to reset Advanced →View Type back to Field container and  OK. 

Setting Place Holder Text

It can be useful to display information in the field itself. For example, a data field could have placeholder text giving instructions to the user, such as "Add customer's request here". Placeholder text is only displayed when a field has no data to display. This means you can use placeholder text instead of a label when a form has easily-identifiable data, such as a name, address and phone number.

1. Drag a data field from the palette onto a form.

2. Name the field. PhixFlow opens the field properties.

3. In the Basic Settings section:

   • either edit the Place Holder Text property to enter the placeholder text you want to use  

   • or tick Use Field Name as Place Holder. PhixFlow uses field's name as the placeholder text. 

4. Click  OK.

Adding a Dynamic Text Label

You can create a label or heading that changes depending on the user-selected record, using a dynamic text component. This is useful to add headings to a form or card that change depending on the selected record. This is illustrated for a form heading on the right.

As for labelled fields, bind the component to data by giving it the same name as an attribute. Usually you will want to use the primary key for a heading.

For a Grid

1. Create a dashboard with a grid and form, both bound to the same stream or view. 

2. Add a dynamic text component to the form.

3. Give the dynamic text component the same name as an attribute in the backing data.

For a Card

1. Drag a stream directly onto a dashboard. In the pop-up window, select the card component.

2. Optionally, select related attributes.

3. In the card header, add a dynamic text component.

4. Give the dynamic text component the same name as an attribute in the backing data.

Illustration of Dynamic Text

The following dashboard has:

• a grid at the top
• a form below.

The form's heading displays the business name from the selected record in the grid.

Dashboard with grid (top) and form (below) 

The form's heading is a dynamic text component. It is set to display the attribute Name from the selected record in a grid.

Both the data grid and the form are bound to a stream called Business, which includes the attribute called Name.     

In the dynamic text field properties, the Name property is set to Name. PhixFlow recognises that Name is an attribute. This creates a link between the dynamic text field and the attribute.