Adding Text and Labels

Owned by Fiona Sargeant (Unlicensed)
Last updated: Nov 22, 2024 by Zoe Baldwin

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

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 Style Settings section to format the text. For example, you can specify the colour, weight and size of the text

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

  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. You can also set placeholder text to appear in Basic Settings → Placeholder Text, e.g. “Enter surname here” 

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

  7. 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: 
      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 Tag, white-space
    2. Value, pre-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

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  Create New Form
  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

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 Adding Screen Content

  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 Placeholder Text

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

  1. Drag a form field or dynamic text component from the palette onto your screen

  2. Name the component and PhixFlow opens the component properties

  3. In the Basic Settings section:

    • either edit the Placeholder Text property to enter the placeholder text you want to use  

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

  4. Click  Apply and Close