Versions Compared

Old Version 8

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

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

todo - drafting

This page is is for application designers who need to create forms. It explains techniques for associating data field with text, such as a label.

Overview

You can combine fields and text using

  • Static Text
  • Dynamic text
  • Placeholder text

For information about components, layouts reordering components; see <link todo>

 drag-and-drop techniques ; see <link todo>

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

Reminders

When you drag in something like an attribute, PhixFlow picks the appropriate component from  the default palette, set in System configuration default component palette.

All installations get the basics. Other palettes are available. Theme 2 is designed so that components flow.

Labelling Fields

When designing forms you often want the field to have a text label, either above or beside the field, for example:

Image Removed

This type of layouts is made up of at least 3 components: 

  • a form component, with the settings:
    • Basic Settings → Composite ticked
    • Advanced → View Type → field container
  • the child components
    • a static or dynamic text field
    • a data field, such as string, number or date.

To create a labelled field you can start from data or by setting up the fields.

Image Removed

Example of the layout structure of a labelled field

todo Gif showing dragging on 2 attributes with basic formatting

todo 2 videos showing a basic attribut and one from a theme

Starting from Data

Data is stored in streams (tables). You can also create a data view based on a stream (table). Using a view means you can

  • include attributes from related tables
  • apply filtering and sorting to how data records are displayed without affecting the original stream (table).

You can bind

a stream (table) or view directly to an area, form-area or card-container->area. This is useful if the area contains multipleeans you can right-click the container and select Show attributes for the backing stream (table). This opens the list of available attributes that you can bind to specific components.

To create labelled fields starting with data: 

  1. Open a list of stream (table) attributes. For example, in the repository:
    • either expand Stream (table)  → Attributes
    • or open stream properties → Attributes section
  2. Drag attributes onto an area or form-area on the screen canvas.
  3. PhixFlow adds a labelled field from your applications default palette.

This method has the advantage that the fields are automatically bound to the appropriate data.

Starting with a Layout

To create a labelled field layout, drag layouts from one of the palettes.

  1. Find the palette you want to use that contains labelled fields. For example:
    • for basic formatting use palette → Labelled Fields
      Image Removed
    • for responsive design use palette → Theme 2 - App Builder Base Components
  2. Drag a layout from the palette onto an area or form-area on the screen. Select field that matches the data type of the attribute that will be displayed.
  3. Bind the field to data: see Showing Data on a Screen.
Tip

Different palettes have different formatting and flow settings for labelled fields. Fields can also inherit properties, such as flow direction, from their container; see Using Size and Position for Responsive Design.

Understanding Field Containers and Composite Components

These are configured as composite components where the label and the field are associated 

What this gives you

The two parts are effectively grouped. Selection selects them both, and if you move them they move together

When you add the name, it applies to both components and the name is used for the static text label

  1. Field container but not composite
  2. Composite but not field container....

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.

More text

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.
  • 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. In the layouts list, find the container for the fields and double-click it to open its properties.

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

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

    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

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