Versions Compared

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 text with a data field with text, such as to label a labelfield.

Overview

You can combine fields and text using

  • Static Text
  • Dynamic text
  • Placeholder text

For information about components, layouts reordering components; see <link todo> Understanding Components and Layouts

 drag-and-drop techniques ; see <link todo> Drag-and-Drop Techniques

Reminders

When you drag in something like an attribute, PhixFlow adds a component from the default palette

  1. Application
  2. set in System configuration default component palette.

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

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:

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

  • a form component, with the settings:
    • Basic Settings → Composite ticked
    • Advanced → View Typefield 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.

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.Showing Data on a Screen

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 the stream properties → Attributes section.
  2. Drag attributes onto an area or form -area on the screen dashboard 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.first create the layout, then bind data to components.

  1. Create the layout
    1. Find the palette you want to use
    that contains labelled fields. For example:for basic formatting use 
    1. and drag in a form container.
    2. Drag labelled fields onto the form container. Select field that matches the data type of the attribute that will be displayed.
      You can find labelled fields:
      • with basic formatting in palette → Labelled Fields
        Image Modified
    for
      • with responsive design
    use
      • in 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 Bind data to components
    1. Open the container properties. In the Basic Settings → Stream or View (StreamViewName) properties, select a stream or view to bind it to the container component.
    2. In the dashboard, right-click the container and select Show attributes for name, where name is the stream or view bound to the container.
    3. PhixFlow opens the list of available attributes.
    4. Drag attributes from the list onto specific field components to display the attribute's data.

See also: 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


Use a Field Containers

and Composite Components

to

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