This page is is for application designers who need to create forms. It explains techniques for associating text with a data field, to label a field.
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.
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:
In the dashboard toolbar, click the Palette icon.
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.
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 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.
- In the properties, in Basic Settings → Display Text, enter the fixed text you want to appear and save your changes.
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 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.
A labelled field is a composite component that includes:
- 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.
For information about composite components, see Grouping Components.
The default component to use when you drag attributes onto a dashboard are set in the Application properties or in System Configuration.
Adding a Dynamic Text Label
PhixFlow matches a dynamic text component to an attribute by matching their names. This is shown in the following illustration.
A dashboard has a form container that includes a dynamic text field component that looks like this:
Dynamic text field showing the business name
The dynamic text field displays the attribute Name from the selected record in a grid. In the dashboard below, the first record, for the business Avaveo, is selected.
Dashboard with grid (top) and form (below)
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.
ddd
Setting Place Holder Text
Place holder text can be used to display a message to communicate information to the user. The value can be set manually or set to match the form field label.
- Select the Form Field on the dashboard.
- In the properties window on the right:
- Type a value in the Place Holder Text field to manually set a value.
- Tick Use Field Name as Place Holder to use the name of the field as the place holder text.
- Type a value in the Place Holder Text field to manually set a value.
Advanced Editing
In addition to a label, you may want additional text below the field. For example you might want to add
- static text, to explain what the user can do.
- dynamic text that depends on selected data.
- In a basic components palette, such as Basic Components, drag a Static Text or Dynamic Text layout onto a form area.
Right-click the new field and select Find. In the layouts list, find the container for the fields and double-click it to open its properties.
In the Advanced section, the View Type is Field container. Expand the drop-down list and select the empty row. Save the container component. This "opens" the container so you can add more components to it.
- In the layouts list, shift-click and drag the new component into the container. PhixFlow moves your component to be a child of the container component.
Important: Open the field container properties again and reset Advanced →View Type to Field container. All child components are now contained within the parent, which is also a composite component.