Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 by the following dashboard components to:

  1. Setup the Dynamic Text Field Value
  2. Set the label on a Form Field (aka Data Fields)
  3. Set the Place Holder Text on a Form Field (aka Data Field)

For information about these components see Understanding Components and Layouts

For information about Binding Data to a form, also known as Backing Data, see Showing Data on a Screen. 


Live Search
spaceKey@self
additionalnone
placeholderSearch all help pages
typepage

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone



Setup the Dynamic Text Field Value

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

  1. The DashboardCreate a Dashboard with a Dynamic Text Field and back it by data (see Showing Data on a Screen for more detail) 

  2. The dashboard is backed by a stream called Business

  3. The dashboard contains a Dynamic Text Field

    1. Image Removed

    This has the Name, Name., its Name is set to Name

    1. Image Modified  

  4. As the Dynamic Text Field Name matches the name of an attribute on the Business stream a link is created dynamically., and the name of the business is displayed.
    1. Image Added



Set the Label on a Form Field

When designing a Dashboard we most often want the Form Fields to have a label to indicate what the data is. For example:

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:

  1. Open a stream or view.

  2. Open the attributes section.

  3. 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:

  1. Click on the Form Field, then click again to select the label. 

  2. In the properties window on the right, update the Display Text to the desired value.

  3. Save your changes.




Manually Creating Form Fields

  1. In the Screen's toolbar click the Palette button .

  2. Open the your desired palette e.g. Theme 2.1

  3. Open the Labelled Fields section e.g.

  4. Drag a labelled field onto your screen. Note, select a field that matches the type of data the attribute will display.

  5. 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. 

  1. Click on the Broken link Icon.

  2. Follow the wizard prompts.


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.

  1. Select the Form Field from the Dashboard.
  2. In the properties window on the right:
    1. Type a value in the Place Holder Text field to manually set a value.
      1. Image Modified
    2. Tick Use Field Name as Place Holder, to use the name of the field as the place holder text.
      1. Image Modified



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.
  1. In a basic components palette, such as Basic Components, drag a Static Text or Dynamic Text layout onto a form area.
  2. 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.

  3. 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.

  4. 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.
  5. Important: Open the field container properties again and reset AdvancedView Type  to Field container. All child components are now contained within the parent, which is also a composite component.


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 Typefield container

  • the child components

    • a static or dynamic text field

    • a data field, such as string, number or date.

Creating your own composite

  1. 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 

  2. 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.

  3. In the Advanced section, set the View Type to Field container.

  4. In the Basic Settings section, tick Composite.