This page is is for application designers who need to create forms. It explains techniques for associating label 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
Insert excerpt _attributes_show _attributes_show nopanel true 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
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 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 illustrationThe 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 form container that includes a dynamic text field component that looks like this: Dynamic text field showing heading that displays the business name The dynamic text field displays the attribute Name from the selected record in a grid. . Dashboard with grid (top) and form (below)In the dashboard below, the first record, for the business Avaveo, is selected. Dashboard with grid (top) and form (below)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
|
ddd
Setting Place Holder Text
Place holder text It can be used useful 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 textinformation 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 | ||||
---|---|---|---|---|
|
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 that depends on selected data.
- 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 fields labelled field and double-click it to open its properties.
In the Advanced section, the View Type is is set to Field container. Expand the drop-down list and select the empty row. Save the container component. This
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 component.
Important: Open the field Go back o the container properties again and to reset Advanced →View Type back to Field container and
.Insert excerpt _finish _finish nopanel true
All child components are now
contained within the parent, which is alsogrouped 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:
|