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 label text with a data field, to label a 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
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


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
    nopaneltrue

  • 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:
  1. In the dashboard toolbar, click the

    Insert excerpt
    _palette
    _palette
    nopaneltrue
     icon.

  2. 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
  3. Drag components onto a form container.

    Note

    Field or labelled fields must match the data type of the attribute that it will display.


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

  1. From the palette, drag a static text field component onto the dashboard.
  2. If this is a label for a data field, optionally group the data field and the static text field together; see Grouping Components.
  3. 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:

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

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

  1. Open the list of available attributes.

  2. Drag an attribute onto a form container on the dashboard.

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

  1. Create a dashboard with a grid and form, both bound to the same stream or view. 
  2. Add a dynamic text component to the form.
  3. Bind the component to an attribute.

For a Card

  1. Drag a stream onto a dashboard. In the pop-up window, select the card component.

  2. Optionally select related attributes.

  3. In the card header, add a dynamic text component.
  4. 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
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleIllustration of Dynamic Text

A dashboard has a form container that includes a dynamic text field component that looks like this:

Image Removed
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.  .

Image Added
Dashboard with grid (top) and form (below) 

In the dashboard below, the first record, for the business Avaveo, is selected.Image Removed     

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 Business, which includes the attribute called Name.     

Image Modified

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

Image Removed


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.

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

Advanced Editing

In addition to a label, you may want additional text below the field. For example you might want to add

static text

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

  1. On a dashboard, select the field to display it's properties tab.
    Image Added
  2. In Basic Setting:
    • either enter the placeholder text in Place Holder Text  Image Added
    • or tick Use Field Name as Place Holder. PhixFlow uses field's name as the placeholder text. Image Added
  3. Click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    .

Anchor
more-label
more-label
Adding to a Labelled Field

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.
      • a data field that displays data from the attribute.

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

    1. From the palette, drag a static text or dynamic text component onto a form container.
    2. In the dashboard right-click the existing labelled field and select 

      Insert excerpt
      _repository_find
      _repository_find
      nopaneltrue
      .

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

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

      Insert excerpt
      _save
      _save
      nopaneltrue
       the properties. This "opens" the container so you can add more components to it.

    5. 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.
    6. Important: Open the field Go back o the container properties again and to reset AdvancedView Type   back to Field container and 

      Insert excerpt
      _finish
      _finish
      nopaneltrue
      .

    All child components are now

    contained within the parent, which is also

    grouped as a composite component in the container.

    Field Containers

    todo-fiona What is it field containers do related to sharing data...


    HTML Comment
    hiddentrue

    Not yet implemented

    To bind the field to an attribute:

    1. Click on the broken link icon.

    2. Follow the wizard prompts.

    Additional Reading


    See also

    Showing Data on a Screen