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

There are several ways that you can use stream data to set labels on a dashboard. The text in a label can show:

  • fixed text that you enter
  • the name of the selected attribute
  • text that updates dynamically depending on the selected record
  • placeholder text.

Image Removed

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. To access a list of attributes in the stream or view that is bound to the form:

Either right-click on the form in the dashboard and select  Insert excerpt_attributes_show_attributes_shownopaneltrue
  • Or open the properties tab for a stream or view and expand the Attributes section.

  • See also

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

    Table of Contents
    maxLevel3
    indent12px
    stylenone

    Add a Fixed Text Label

    Use this option where you want to specify the text exactly.

  • From the palette, drag a static text component onto the dashboard next to a data field.
  • Optionally, group the data field and the static text field together; see Grouping Components.
  • In the static text component properties, in Basic Settings → Display Text, enter

    Insert excerpt
    _Banners
    _Banners
    namescreen
    nopaneltrue

    Overview

    PhixFlow has different components that you can use to add text to a screen. 

    1. Static Text: for specific text that you want to show on a screen.
    2. Dynamic Text: for text that changes depending on screen activity.
    3. Labelled Fields: for displaying table attribute values with labels.
    4. Place Holder Text: for form field. It appears as low-light text that displays details about a data field or instructions for the user to follow.

    Image Added

    Label a Field

    When designing a dashboard, you usually want fields to have a label that indicates the data being displayed. For example 

    Image Removed

    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.

    To create a field from an attribute:

    1. Open the properties tab for a stream or view.

    2. In the Attributes section, 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, which takes its name from 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.

    Image Removed

    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. 

      1. Image Removed

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

    3. Save your changes.

    Image Removed

    Manually Creating Form Fields

    In the Screen's toolbar click the Insert excerpt_palette_palettenopaneltrue button.
  • Open the your desired palette e.g. Theme 2.1

  • Open the Labelled Fields section e.g.

    1. Image Removed

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

    1. Click on the broken link Icon.

    2. Image Removed

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

    Adding Static Text

    Static text is useful for many purposes including headings, button labels and instructions that you want the screen to display. To add static text:

    1. Open your Palette, drag a static text field component onto your screen.

      1. Static text templates can typically be found in the Basic Layout and Text sections of a palette.  

    2. To edit the text, in the properties for the static text navigate to Basic Settings → Display Text.

      1. To open the properties for the item simply click on the item on the screen.
    3. Enter the fixed text you want to appear.

    4. Use the

    Attribute as a Label

    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 lable. For example, an attribute called Name has company name data:

    Image Removed

    To create a label from an attribute:

    1. Open a list of attributes from the stream upto here.

    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.

    Display Dynamic Text as a Label

    For dynamic text fields, PhixFlow matches the field to an attribute in the bound stream or view by matching their names. This is shown in the following illustration.

    Panel
    borderColor#00374F
    titleColorwhite
    titleBGColor#00374F
    borderStylesolid
    titleIllustration

    A dashboard has a form container that includes dynamic text field.

    Image Removed
    Dynamic text field showing the business name

    The dynamic text field displays the attribute Name from the selected record in a grid.  
    Image Removed            Image Removed

    Dashboard with grid (top) and form (below)                                                     Stream that is bound to the grid and the form

    Both the data grid and the form are bound to a stream called Business, which includes the attribute called Name.

    The form contains a dynamic text field. Because we want this field to display data for the attribute Name, it has been called Name. This creates a link between the dynamic text field and the attribute.

    Image Removed  

    1. Style Settings section to format the text. For example, you can specify the colour, weight and size of the text.

    2. Save your changes.

    Adding Dynamic Text

    Dynamic text is useful when the text needs to adapt to the content of the screen, for example to show the name of a selected company. To add dynamic text:

    1. Open your Palette, drag a dynamic text field component onto your screen.

      1. Dynamic text templates can typically be found in the Basic Layout and Text sections of a palette..  

    2. To have the dynamic text reflect the value held in a table backing your screen, such as the name of an employee, simply name the Dynamic Text field to be the same as the attribute you wish to display. It is also possible to do the same with context variables.

    3. Where there is no underlying table or the attribute value is empty, we can specify the default text to be displayed. In the properties for the dynamic text navigate to Basic Settings → Default Value.

      1. To open the properties for the item simply click on the item on the screen.
    4. Enter the text you want to appear.

    5. Use the Style Settings section to format the text. For example, you can specify the colour, weight and size of the text.

    6. Save your changes.

    Adding Dynamic Text with Returns

    Text that has carriage returns in the text, aka new lines of text, for example outputting a set of results to a dynamic text area where each record is on a new line, is achieved as follows.

    1. Add a Dynamic Text Field to your  screen.
      1. Such as Palette → Serene Grey → Basic Layouts →   Text - Dynamic.
    2. When creating the value that is to be written to the dynamic text, use "\n" to add carriage returns to your string value.
      1. For Example: 


        Code Block
        do(
        	forEach($i,1..countElements($myArray),
                $message = $message + "\n" + getElement($myArray, $i)
            )
        	
            //Output the message
        	$message
        )


      2. This outputs each value in $myArray on a new line.
    3.   The Dynamic Text field requires an entry in the CSS Properties
      1. CSS Tagwhite-space
      2. Valuepre-wrap

    Adding Labelled Fields

    Labelled fields are used to display and enter data on a form. We recommend adding attributes directly to a screen as PhixFlow will automatically:

    • chooses a component that matches the attribute's data type.
    • names the components.
    • binds the field to the attribute.
    • Styles the form field.
    Tip

    All the fields on a form must display data from the same table or view. You can create a view that includes attributes from different tables, provided the tables are related: see Entity Relationship Diagrams.

    Starting with Data (recommended)

    1. In the screen or screen element, to add a form container, right-click and select 
      Insert excerpt
      _form_new
      _form_new
      nopaneltrue
      .
    2. From a list of attributes, drag an attribute onto the form container. 
    3. For the first attribute you add, PhixFlow asks you to confirm that you want to bind this form container to the table or view.
    4. PhixFlow recognises that you want to add fields to a form. It uses the default labelled field, which is set in the Application Properties properties or in System Configuration.
    5. Image Added

    Starting with Components from the Palette

    1. Open your palette and expand one of the Form Fields sections, such as Form Fields by Data Type.

    2. Drag components onto a form container, these should match the type of data you wish to display for example Date or Number.

    3. Enter a name so that PhixFlow can save the component to the repository. Labelled fields use the name entered as it's label.

    4. No date will display until the screen is backed by data.

    To bind the screen to data

    1. Bind the form container to a table or view; see Showing Data on a Screen.
    2. If the name of the labelled field matches the attribute name from the table or view backing the screen the data will be displayed. If the names do not match you can:

      1. right click on a field

      2. Select Change Backing Attribute.

      3. Select the appropriate attribute.

      4. Save your changes.

    Setting Place Holder Text

    It can be useful to display information in the field itself. For example, giving instructions to the user to "Add customer's request here". Placeholder text is only displayed when a field has no data to display. 

    1. Drag a form field from the palette onto a form.

    2. Name the field. PhixFlow opens the field properties.
    3. In the Basic Settings section:

      • either edit the Place Holder Text property to enter the placeholder text you want to use  Image Added

      • or tick Use Field Name as Place Holder. PhixFlow uses field's name as the placeholder text. Image Added

    4. Click 

      Insert excerpt
      _finish
      _finish
      nopaneltrue
      .