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.
Overview
Data held in a stream can be used to set the values for the following components on a Dashboard:
- a dynamic text field
- Labelling The text used by a Dynamic Text Field
- The label used on a Form Field (aka Data Fields)
- Setting place holder text on a Form Field (aka Data Field)
For information about these items components see Understanding Components and Layouts
drag-and-drop techniques ; see Drag-and-Drop Techniques
Reminders
When you drag in something like an attribute, PhixFlow adds a component from the default palette
Applicationset in System configuration default component palette.
All installations get the basics. Other palettes are available. Theme 2 is designed so that components flow.
For information about Binding Data to a form, also known as Backing Data, see Showing Data on a Screen.
Live Search | ||||||||
---|---|---|---|---|---|---|---|---|
|
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Labelling Form Fields
When designing
forms youa Dashboard we most often want the
form fieldForm Fields to have a
textlabel to indicate
he type of data in the field, forwhat the data is. For example:
This type of layouts is made up of at least 3 components:
a form component, with the settings:Basic Settings → Composite tickedAdvanced → View Type → field container
the child componentsa static or dynamic text fielda data field, such as string, number or date.
To create a labelled field you can start from data or by setting up the fields.
Example of the layout structure of a labelled field
todo Gif showing dragging on 2 attributes with basic formatting
todo 2 videos showing a basic attribut and one from a theme
Setting Place Holder Text
Setting a Dynamic Text Field
Dynamic text fields can be linked to by name
Starting from Data
Data is stored in streams. You can also create a data view based on a stream. Using a view means you can:
- include attributes from related tables
- apply filtering and sorting to how data records are displayed without affecting the original stream.
To create labelled fields starting with data:
- Open a list of attributes. For example, in the repository:
- either expand Stream → Attributes
- or open the stream properties → Attributes section.
- Drag attributes onto an area or form on the dashboard canvas.
- PhixFlow adds a labelled field from your applications default palette.
This method has the advantage that the fields are automatically bound to the appropriate data.
Starting with a Layout
To create a labelled field layout, first create the layout, then bind data to components.
- Create the layout
- Find the palette you want to use and drag in a form container.
- Drag labelled fields onto the form container. Select field that matches the data type of the attribute that will be displayed.
You can find labelled fields:- with basic formatting in palette → Labelled Fields
- with responsive design in palette → Theme 2 - App Builder Base Components
- with basic formatting in palette → Labelled Fields
- Bind data to components
- Open the container properties. In the Basic Settings → Stream or View (StreamViewName) properties, select a stream or view to bind it to the container component.
- In the dashboard, right-click the container and select Show attributes for name, where name is the stream or view bound to the container.
- PhixFlow opens the list of available attributes.
- Drag attributes from the list onto specific field components to display the attribute's data.
See also: Showing Data on a Screen.
Tip |
---|
Different palettes have different formatting and flow settings for labelled fields. Fields can also inherit properties, such as flow direction, from their container; see Using Size and Position for Responsive Design. |
Use a Field Containers to
These are configured as composite components where the label and the field are associated
What this gives you
The two parts are effectively grouped. Selection selects them both, and if you move them they move together
When you add the name, it applies to both components and the name is used for the static text label
- Field container but not composite
- Composite but not field container....
Creating your own composite
- In a basic components palette, such as Basic Components, drag onto a form area
- an area to be a container
- the components you want to treat as a single layout
Right-click one of the new fields and select Find. In the layouts list, shift-drag to move the components into the container you created.
In the Advanced section, set the View Type to Field container.
In the Basic Settings section, tick Composite.
Data is stored in streams and displayed using views. Any form field associated to an attribute from either of these items will automatically use the name of the attribute as its label.
Creating Form Fields from a Stream or View
To set this up as follows:
Open a stream or view.
Open the attributes section.
Drag an attribute, or attributes, onto a dashboard.
PhixFlow creates a Form Field based on the Default Component defined for your application, automatically associated the attribute with the Form Field and uses the attribute's name as the label.
Editing a Form Field Label
To change the default name of a Form Field:
Click on the Form Field, then click again to select the label.
In the properties window on the right, update the Display Text to the desired value.
Save your changes.
Manually Creating Form Fields
In the Screen's toolbar click the Palette button .
Open the your desired palette e.g. Theme 2.1
Open the Labelled Fields section e.g.
Drag a labelled field onto your screen. Note, select a field that matches the type of data the attribute will display.
Provide a name when prompted.
Optional Steps
If you need your field to be backed by data it will need to be associated to an attribute on a stream.
Click on the Broken link Icon.
Follow the wizard prompts.
Creating Form Fields from a Stream or View
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 from 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.
Setting a Dynamic Text Field
Dynamic Text Field will link to data by matching its name with the name of a Stream attribute that is bound to the form or area the Dynamic Text Field resides on.
Worked Example
- The Dashboard
- The dashboard is backed by a stream called
Business
- The Dynamic Text Field
- This has the Name,
Name
. - As the Dynamic Text Field Name matches the name of an attribute a link is created dynamically.
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.
Live Search | ||||||||
---|---|---|---|---|---|---|---|---|
|
borderColor | #00374F |
---|---|
titleColor | white |
titleBGColor | #00374F |
borderStyle | solid |
title | Sections on this page |
Additional Reading
Showing Data on a Screen
Move these to Understanding Components and layouts
This type of layouts is made up of at least 3 components:
a form component, with the settings:
Basic Settings → Composite ticked
Advanced → View Type → field container
the child components
a static or dynamic text field
a data field, such as string, number or date.
Creating your own composite
- In a basic components palette, such as Basic Components, drag onto a form area
- an area to be a container
- the components you want to treat as a single layout
Right-click one of the new fields and select Find. In the layouts list, shift-drag to move the components into the container you created.
In the Advanced section, set the View Type to Field container.
In the Basic Settings section, tick Composite.