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.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

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

For
  1. Static Text: for specific text that you want to show on a screen
, use a static text field
  1. .
For
  1. Dynamic Text: for text that changes depending on
a selected record, use a dynamic text field linked to the attribute in a grid.
  • For the labels on data fields, use labelled fields.
  • For a clean form, where an empty field displays its name or instructions to the user, use the static text field property Place Holder 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. 

    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_shownopaneltrue
  • or open the properties tab for a stream or view and expand the Attributes section.

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

    Table of Contents
    maxLevel3
    indent12px
    stylenone

    Adding a Static Text Label

    Use a static text component to add your own text to a dashboard. This is useful for headings or
    1. screen activity.
    2. Labelled Fields: for displaying table attribute values with labels.
    3. 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

    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

    a

    static text

    field

    :

    From the palette
    1. Open your Palette, drag a static text field component onto

    a form container.In the properties, in Basic Settings → Display Text, enter
    1. 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 to set the colour select bold or italic formatting
    1. . For example, you can specify the colour, weight and size of the text.

    2. Save your changes.

    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 heading that displays the business name from the selected record.

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

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

    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 Removed

    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.

    Image Removed  

    Creating Labelled Fields on a Form

    For forms that display data or in which the application user can add or edit data have data fields. The easiest way to add a label to a data fields is to add a labelled field component to the form:

    • either by starting with data
    • or by starting with components from the palette.
    We recommend starting with data, as PhixFlow

    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

    stream

    table or view. You can create a view that includes attributes from different

    streams

    tables, provided the

    streams

    see Understanding Labelled Fields, below.

    Image Removed

    A form with labelled fields

    tables are related: see 

    Understanding ERDs and Views.

    Entity Relationship Diagrams.

    Starting with Data (recommended)

    1. In the
    dashboard
    1. screen or
    dashboard
    1. 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
    stream
    1. table or view.
    2. PhixFlow recognises that you want to add fields to a form. It
    adds a labelled field component designed to display the attributes data.PhixFlow The default component to use when you drag attributes onto a dashboard are set in the Application properties or in System Configuration.
    1. uses the default labelled field, which is set in the Application Properties properties or in System Configuration.

    Where the attribute name is a good reflection of it's data, you can use this to add a label. To change the label to something that is more helpful to the application user:

    1. Click on the data field, then click again to select the label. PhixFlow opens the label's property tab.
    2. In Basic Settings change the Display Text, then save your changes.

    You cannot drop an attribute directly onto a dashboard, dashboard element or area as PhixFlow does not know what type of component you want to add.

  • Basic Components
  • Labelled Fields
  • Theme 1 - App Builder Base Components
  • Theme 2 - App Builder Base Components
    1. Image Added

    Starting with Components from the Palette

    In the dashboard or dashboard element, to add a form container, right-click and select  Insert excerpt_form_new_form_newnopaneltrue. The form container has not data bound to it.If the palette tab is not shown on the right, in the dashboard toolbar, click the Insert excerpt_palette_palettenopaneltrue icon.

    Expand a palette that has field or labelled field components, such as:

    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

    . NoteSelect a field or labelled field that matches
    1. , these should match the type of data

    that it will display
    1. you wish to display for example Date or Number.

    2. Enter a name so that PhixFlow can save the component to the repository.

    For labelled fields, enter a name that reflects the label you want to see on the dashboard.
    1. Labelled fields use the name entered as it's label.

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

    To bind the screen to data

    1. Bind the form container to a
    stream To add additional static or dynamic text fields to a labelled field; see Changing a Labelled Field
    1. table or view; see Showing Data on a Screen.
  • For each labelled field, rename the area to be the same as the name of an attribute in the backing data.
    PhixFlow automatically renames the data field and displays its data. The label remains unchanged.

  • You have to change the labelled field name to bind it to an attribute. If you drag an attribute onto an existing labelled field, PhixFlow adds a new labelled field for the attribute.  Anchorlabelledlabelled

    Understanding Labelled Fields

    Image Removed

    Basic Components: individual data field and text components

    Image Removed

    Labelled fields: a composite component comprising a data field and a static text field

    Components

    A labelled field is made up of:

    • an area that contains:
      • a static text field
      • a data field that displays data from the attribute.

    Naming

    PhixFlow uses the same text for:

    • the area name
    • the data field name
    • the static text Basic Settings → Display Text.

    When you start with data, the text is the name of the attribute.
    When you start with a labelled field from the palette, the text is the name you give the component.

    Properties

    The area for a labelled field has the properties:

    • Basic Settings → Composite Component ticked
      This groups the child components together. If you drag the data field, the text field moves with it: see Grouping Components.
    • Advanced → View Type: Field container, to link the component with an attribute.
      When the area or data field name is the same as an attribute in the backing stream or view, PhixFlow display the attribute data in the field.

    Illustration

    In the following screenshot shows the different components of a labelled field.

    • The orange box highlights the containing area.
    • The green box highlights static text field, which has the Display text Name.
    • The grey box is a data field, in this case for a string.

    Image Removed

    The components are grouped together. If you drag one on the dashboard, all three components move. 

    PhixFlow displays the data from the Name attribute because the containing area and the data field have the same name as the attribute.

    Changing Names and Labels

    Note

    PhixFlow binds the data field to an attribute in the backing data that has the same name. To bind the data field to a different attribute, change

    • either the data field's name
    • or the containing area's name.

    If you change the name of either the data field or the area, PhixFlow automatically:

    • updates the name of the other component, so the names always match
    • looks in the backing data for an attribute with the same name
    • displays data from the attribute, if there is one that matches.

    The static text field is called Label. Edit the static text properties to change it's name or the Display Text.

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

    a labelled field could have placeholder text

    giving instructions to the user

    , such as

    to "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.On a dashboard, select the field to display it's properties tab.
    In Basic Setting:
    either enter the placeholder text in Place Holder Text  Image Removed

     

    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 Removed
      • Image Added

    1. Click 

      Insert excerpt
      _finish
      _finish
      nopaneltrue
      .

    Anchormore-labelmore-labelChanging a Labelled Field

    When you drag an attribute onto an area, PhixFlow adds the default 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 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:

  • From the palette, drag a static text or dynamic text component onto a form container.
  • In the dashboard right-click the existing labelled field and select  Insert excerpt_repository_find_repository_findnopaneltrue.
  • PhixFlow opens the repository listing Layouts. In the layouts list, find the container for the labelled field and double-click it to open its properties.

  • In the Advanced section, the View Type is set to Field container. Expand the drop-down list and select the empty row.  Insert excerpt_save_savenopaneltrue the properties. This "opens" the container so you can add more components to it.
  • 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.
  • Go back o the container properties to reset AdvancedView Type back to Field container and  Insert excerpt_finish_finishnopaneltrue.

    All child components are now 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.
      Image Removed

    2. Follow the wizard prompts.

    See also

    Showing Data on a Screen