This page is is for application designers who need to create forms. It explains techniques for associating label text with a data field.
Creating Labelled Fields on a Form
There are two ways to design a form for a screencreate a form with labelled fields:
- either by starting with data
- or by starting with components from the palette.
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.
Tip |
---|
All the fields on a form must display data from the same stream or view. You can create a view that includes attributes from different streams, provided the streams are related: see Understanding ERDs and Views. |
A form with labelled fields
Starting with Data
- In the dashboard or dashboard element, to add a form container, right-click and select
.Insert excerpt _form_new _form_new nopanel true - From a list of attributes, drag an attribute onto
- the form container.
- For the first attribute you add, PhixFlow asks you to confirm that you want to bind this form container to the stream or view.
- PhixFlow recognises that you want to add fields to a form. It adds a default labelled field
- component to the dashboard. The component matches the data type of the
- attribute.
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.
Starting with Components from the Palette
- In the dashboard or dashboard element, to add a form container, right-click and select
. The form container has not data bound to it.Insert excerpt _form_new _form_new nopanel true If the palette tab is not shown on the right, in the dashboard toolbar, click the
icon.Insert excerpt _palette _palette nopanel true 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
Drag components onto a form container.
Note Field Select a field or labelled fields must match the data field that matches the type of the attribute data that it will display.
Enter a name so that PhixFlow can save the component to the repository.
Adding a Static Text Label
Enter Your Own Text
Static text components display the text entered in their Display Text property.
- From the palette, drag a static text field component onto the dashboard.
- If this is a label for a data field, optionally group the data field and the static text field together; see Grouping Components.
. For labelled fields, enter a name that reflects the label you want to see on the dashboard.
- Bind the form container to a stream or view; see Showing Data on a Screen.
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.
Anchor | ||||
---|---|---|---|---|
|
Understanding Labelled Fields
Basic Components: individual data field and text components
Labelled fields: a composite component comprising a data field and a static text field
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.
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.
Illustration
In the following screenshot shows the different components of a labelled field.
- The orange box highlights the containing area.
- The green box highlights static text field, which has the Display text
Name
. - The grey 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.
PhixFlow displays the data from the Name attribute because the containing area and the data field have the same name as the attribute.
Changing Names and labels
Note |
---|
PhixFlow binds the data field to an attribute in the backing data that has the same name. To bind the data field to a different attribute, change
|
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.
Adding a Static Text Label
Use a static text component to add your own labels or text to a dashboard. To add or change a static text field:
- To create a static text label, from the palette, drag a static text field component onto the dashboard.
- To select a static text label,
- In the properties, in Basic Settings → Display Text, enter the fixed text you want to appear and save your changes.
To change
static
Click on the label to select it.
If the label is in a composite component, click on the data field, then click again to select its label.
PhixFlow displays the static text properties. Edit Basic Settings → Display Text and save your changes.
Basic Components: individual data field and text components
Labelled fields: a composite component comprising a data field and a static text field
Use the Attribute Name
When designing a dashboard, you may want a field to have a label that indicates the data being displayed. Where the attribute name is a good reflection of it's data, you can use this to add a label. For example, an attribute called Name has company name data:
To create a label from an attribute:
Open the list of available attributes.
Drag an attribute onto a form container on the dashboard.
PhixFlow adds a labelled field to the form. The default component to use when you drag attributes onto a dashboard are set in the Application properties or in System Configuration.
For information on how to add more fields to a labelled field, see Adding to a Labelled Field, below.
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.
To bind the component to the attribute, give the dynamic text component the same name as the attribute.
todo-Fiona any attribute or just primary keys?
todo-Fiona anything else
This is useful to add headings to a form or card.
todo-Fiona - Name fields are often the display name for the primary key
For a Grid
- Create a dashboard with a grid and form, both bound to the same stream or view.
- Add a dynamic text component to the form.
- Bind the component to an attribute.
For a Card
Drag a stream onto a dashboard. In the pop-up window, select the card component.
Optionally select related attributes.
- In the card header, add a dynamic text component.
- Bind the component to an attribute.
To bind the dynamic text component to an attribute, do one of the following:
- In the dynamic text properties, give it the same name as the attribute you want to show.
- on the dashboard, drag an attribute from the grid header onto the dynamic text component
- open the list of available attributes and drag one onto the dynamic text component.
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
A dashboard has a heading that displays the business name from the selected record. Dashboard with grid (top) and form (below)In the dashboard below, the first record, for the business Avaveo, is selected. The 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 Stream that is bound to the grid and the formIn the dynamic text field properties, the Name property is set to
|
Setting Place Holder Text
It can be useful to display information in the field itself. For example, a labelled 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.
- On a dashboard, select the field to display it's properties tab.
- In Basic Setting:
- either enter the placeholder text in Place Holder Text
- or tick Use Field Name as Place Holder. PhixFlow uses field's name as the placeholder text.
- Click
.Insert excerpt _finish _finish nopanel true
Anchor | ||||
---|---|---|---|---|
|
Changing a Labelled Field
When you drag an attribute onto an area, PhixFlow adds the default labelled field
A labelled field that you add from the palette is a composite component that includes:
- a container with:
- property → Basic Settings → Composite Component ticked
- property → Advanced → View Type: Field container
- child components:
- a static text field, with properties → Basic Settings:
- Name is
Label
- Display Text is the name of the attribute.
- Name is
- a data field that displays data from the attribute.
- a static text field, with properties → Basic Settings:
For information about composite components, see Grouping Components.
You may want to add another text 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:
- From the palette, drag a static text or dynamic text component onto a form container.
In the dashboard right-click the existing labelled field and select
.Insert excerpt _repository_find _repository_find nopanel true 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.
In the Advanced section, the View Type is set to Field container. Expand the drop-down list and select the empty row.
the properties. This "opens" the container so you can add more components to it.Insert excerpt _save _save nopanel true - 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.
Go back o the container properties to reset Advanced →View Type back to Field container and
.Insert excerpt _finish _finish nopanel true
All child components are now grouped as a composite component in the container.
Field Containers
todo-fiona What is it field containers do related to sharing data...
HTML Comment | ||
---|---|---|
| ||
Not yet implemented To bind the field to an attribute:
|