This page is is for application designers who need to create forms. It explains techniques for associating label text with a data field.
Overview
There are several ways that you can label fields on a screen. You can use:
- a static text component to display text
- that you have entered
- populated with the name of a selected attribute.
- a dynamic text component linked to the attribute in a grid.
As an application users selects records in the grid, the dynamic text field updates. - placeholder text.
When you are designing a form, first add a form component. The form component is the container for all the data fields and labels; see Understanding Components and Layouts. You bind the form component to a stream or view; Showing Data on a Screen. This tells PhixFlow what attributes are available to display in data fields or labels.
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
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 selector open the properties tab for a stream or view and expand the Attributes section.
Creating a Form
There are two ways to design a form for a screen.
- From a list of attributes, drag an attribute onto a form component. PhixFlow adds a default labelled field that matches the data type of the attribute; see Showing Data on a Screen.
- Drag field components individually from the palette, as follows:
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 or labelled fields must match the data type of the attribute 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 paletteInsert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Overview
PhixFlow has different components that you can use to add text to a screen.
- Static Text: for specific text that you want to show on a screen.
- Dynamic Text: for text that changes depending on screen activity.
- Labelled Fields: for displaying table attribute values with labels.
- Place Holder Text: for form field. It appears as low-light text that displays details about a data field or instructions for the user to follow.
Adding Static Text
Static text is useful for many purposes including headings, button labels and instructions that you want the screen to display. To add static text:
Open your Palette, drag a static text field component onto
your screen.
Static text templates can typically be found in the Basic Layout and Text sections of a palette.
To edit the text, in the properties for the static text navigate to Basic Settings → Display Text.
- To open the properties for the item simply click on the item on the screen.
Enter the fixed text you want to appear
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.
borderColor | #00374F |
---|---|
titleColor | white |
titleBGColor | #00374F |
borderStyle | solid |
title | Illustration of Dynamic Text |
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 Business
, which includes the attribute called Name.
Stream that is bound to the grid and the form
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.
.
To change a fixed text label:
Click on the label to select it.
If the label is 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 Style Settings section to format the text. For example, you can specify the colour, weight and size of the text.
Save your changes.
Adding Dynamic Text
Dynamic text is useful when the text needs to adapt to the content of the screen, for example to show the name of a selected company. To add dynamic text:
Open your Palette, drag a dynamic text field component onto your screen.
Dynamic text templates can typically be found in the Basic Layout and Text sections of a palette..
To have the dynamic text reflect the value held in a table backing your screen, such as the name of an employee, simply name the Dynamic Text field to be the same as the attribute you wish to display. It is also possible to do the same with context variables.
Where there is no underlying table or the attribute value is empty, we can specify the default text to be displayed. In the properties for the dynamic text navigate to Basic Settings → Default Value.
- To open the properties for the item simply click on the item on the screen.
Enter the text you want to appear.
Use the Style Settings section to format the text. For example, you can specify the colour, weight and size of the text.
Save your changes.
Adding Dynamic Text with Returns
Text that has carriage returns in the text, aka new lines of text, for example outputting a set of results to a dynamic text area where each record is on a new line, is achieved as follows.
- Add a Dynamic Text Field to your screen.
- Such as Palette → Serene Grey → Basic Layouts → Text - Dynamic.
- When creating the value that is to be written to the dynamic text, use "\n" to add carriage returns to your string value.
- For Example:
Code Block do( forEach($i,1..countElements($myArray), $message = $message + "\n" + getElement($myArray, $i) ) //Output the message $message )
- This outputs each value in $myArray on a new line.
- For Example:
- The Dynamic Text field requires an entry in the CSS Properties
- CSS Tag,
white-space
- Value,
pre-wrap
- CSS Tag,
Adding Labelled Fields
Labelled fields are used to display and enter data on a form. We recommend adding attributes directly to a screen as PhixFlow will automatically:
- chooses a component that matches the attribute's data type.
- names the components.
- binds the field to the attribute.
- Styles the form field.
Tip |
---|
All the fields on a form must display data from the same table or view. You can create a view that includes attributes from different tables, provided the tables are related: see Entity Relationship Diagrams. |
Starting with Data (recommended)
- In the screen or screen 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 table or view.
- PhixFlow recognises that you want to add fields to a form. It uses the default labelled field, which is set in the Application Properties properties or in System Configuration.
Starting with Components from the Palette
Open your palette and expand one of the Form Fields sections, such as Form Fields by Data Type.
Drag components onto a form container, these should match the type of data you wish to display for example Date or Number.
Enter a name so that PhixFlow can save the component to the repository. Labelled fields use the name entered as it's label.
- No date will display until the screen is backed by data.
To bind the screen to data
- Bind the form container to a table or view; see Showing Data on a Screen.
If the name of the labelled field matches the attribute name from the table or view backing the screen the data will be displayed. If the names do not match you can:
right click on a field
Select Change Backing Attribute.
Select the appropriate attribute.
Save your changes.
Setting Place Holder Text
It can be useful to display information in the field itself. For example,
giving instructions to the user
to "Add customer's request here". Placeholder text is only displayed when a field has no data to display.
either enter the placeholder text in Place Holder Text
Drag a form field from the palette onto a form.
- Name the field. PhixFlow opens the field properties.
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.
Click
Insert excerpt _finish _finish nopanel true
A labelled field that you add from the palette is a composite component that includes:
a container with:- Name is
Label
- Display Text is the name of the attribute.
.
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:
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.
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:
|