Component

Component

This page is for application designers. It describes the properties of a component. It also lists the popup menu options for components.

Overview

Components are the building blocks of screens. For information about the different types of component and how they can be combined into layouts, see Screen Structure.

Each component has the following properties. Some properties are only available for some types of component.

. For components, this property is read-only. The parent is the application or package to which it belongs.

Basic Settings

Field

Description

Field

Description

Name

Enter the name of the component.

The names for data views, form fields and card components cannot include spaces.

Mapping Name

Available for input fields. Read-only.

Use this mapping name if you need to map this component in context parameters, drop-downs and expressions.

Once the form is backed by a Stream, the change of a Stream Attributes names do not affect the Mapping Name, so there is no need of altering existing expression after the name change.

Allow Empty Row

Available for drop-down and fixed drop-down components.

 to allow empty rows in the list.

Cache Data

Available for drop-down and fixed drop-down components..

 to cache the data in the field after it is loaded for the first time.

Parent

Available for button components. PhixFlow displays the name for the parent component.

The following options relate to actions.

For new applications created in PhixFlow version 9.0 or later, we recommend you use new actionflows for configuring actions.

  1. Set the Action Method to Actionflow.

  2. Select or create an Actionflow.

For applications created in version 8.3 and earlier, we recommend that you continue to use table-actions combined with either an Action Type or an Action, not both.

  1. Set the Action Method to Stream action.

  2. Select:

    • either an Action Type.

    • or an Action from the appropriate table.

If you specify both, the Action Type overwrites the type of the first record-action rule that is configured in the action properties. The rest of the record-action rule configuration remains the same. For example:

  • A button Action Type is Update.

  • Its Action has 3 record-action rules, to:

    1. insert 

    2. insert

    3. update.

When the user clicks the button, PhixFlow runs the record-action rules in turn, but runs the actions:

  1. update

  2. insert

  3. update

Only the first insert record-action rule type is replaced by the update type specified in the Action Type

Action Type

Available for buttons.

Select one of the following action types that will run when the user clicks the button.

  • General

  • Insert: adds a new record to the table

  • Clear All Fields: clears content from all form fields on the parent form

  • Close Screen: closes the parent screen

  • Update: updates a record

  • Delete: deletes a record

  • Maximise/Minimise Screen: toggles the screen between minimised and its default size.

Alternatively, use the Action field to specify a table-action in which you can configure more details.

Action Method or 
Double-click Action

Action Method is available for buttons. Double-click Action is available for grid views and cards.

Select whether or not an action runs when the user clicks the button or grid. 

  • No Action

  • Table-Action: use when maintaining applications created in PhixFlow version 8.3 or earlier.

  • Actionflow: new in PhixFlow version 9.0.0. Use for new applications; see Creating Actionflows.

Action

Available when Action Method is Table-Action.

Select the action to run when a user clicks the button or double-clicks a grid view or card. The list shows:

  • if your application is not loaded: a list of applications. Select the application on which you are working to see the available tables.

  • if your application is loaded: a list of tables.

Select a table to see the list of actions associated with the table.

Default Action

Available for grid and card data components, when Double-click Action is Table-Action.

Select an action to run when a grid row or card is double-clicked

Drag Type

Available for grid and card data components, when Double-click Action is Table-Action or Actionflow.

Select or add a drag type to use when the user drags a grid row or card; see Drag Types and Drop Targets.

Actionflow

Available when Action Method is Actionflow. Click:

 to create a new actionflow.

 to select an actionflow from a list. The list shows:

  • if your application is not loaded: scroll down the list of applications to find the application on which you are working and its actionflows.

  • if your application is loaded: a list of actionflows in your application.

End of options related to actions

Snap Grid Size

Available for container components:

  • form

  • area

Also available for basic layouts:

  • tab header

  • tab display area

  • labelled number field

  • labelled date field

  • labelled date-time field

  • labelled drop-down field

  • labelled true/false field.

Specify the number of pixels that the component can grow or shrink when resizing in response to changes to the screen size.

Composite Component

 to indicate this component is grouped with its parent component.

It can be useful to group components together, such as a dynamic text field and the static text field that acts as its label. To do this,

  1. Create a component to act as the container, for example an area.

  2. Add the components you want to treat as a single component.

  3. Tick this option for each of the components within the container.

PhixFlow then treats the container and the components it contains, as a single, composite component. In a screen, when you select or drag a component, such as a text field, PhixFlow selects or moves the whole composite component. 

To select a component that is part of a composite component:

  1. Click once to select the composite component.

  2. Click again to select the specific component.

Layout Category 

Available for container components:

  • areas

  • forms

  • card containers.

This property relates to configuring preferred parents for components; see Component Categories and Preferred Parents.

Select a layout category to indicate the part of a screen that this component represents, such as a header, navigation, button-bar or footer. You can also add a new layout category. Layout categories are listed in the repository.

For other components and layouts, the property tab includes a Preferred Parent Categories section. Use this to select the layout categories that are suitable locations to drop a component. For example, a button could have button-bars as their preferred parent. When you drag a component or layout from the palette,  PhixFlow can highlight parts of the screen where you can drop.

Table

Available for card containers and forms.

The name of the table or view bound to the form or card container. 

For a card container, you can drag a  table or view from the repository into this property to bind data.

View Name

Display Text

Available for static text fields.

Enter the text you want to display on the component. By default this field is an expression editor. For options to format the display text as HTML, tick Use HTML Formatting.

Use HTML Formatting

Available for static text fields.

 to change the Display Text field from an expression editor to an HTML editor. You can then use the toolbar to apply HTML formatting to the text. 

Default Value

Available for data field components:

  • true/false field

  • date field

  • date-time field

  • number field

  • string field

  • dynamic text.

Select or enter a value to display in the field. PhixFlow uses this value if:

  • an action opens the screen to which this component belongs

  • and there are no context parameters or form mappings to populate this field.

Date/Time Format

Available for the data field components:

  • date field

  • date-time field

  • dynamic text

  • drop-down

  • static drop-down

Select the format in which to display the date or date time value.

Number Format

Available for the data field components:

  • number field

  • dynamic text

  • drop-down

  • static drop-down

Select the format in which to display the number value.

The list of Number Formats is populated from the formats defined for your: 

  • PhixFlow instance

  • your application's theme

  • your application.

Type

Available for dynamic text, drop-down and static drop-down components.

Select one of the data types:

  • String

  • Integer

  • Float

  • Date

  • Datetime

  • HTML

The data type determines how the selected data will be formatted.

  • Integer or Float must have a number format

  • Date or Datetime must have a date-time format.

Decimal Places

Available for dynamic text components.

Enter the number of decimal places to display for numbers.

URL

Available for URL display components.

Specify the URL that you want to be displayed.

Expression

Available for URL display components.

Enter an expression which, if true, determines the URL.

Multi-line

 to allow the text to wrap over 2 lines.

The following options are only available for date, date-time, number, string, drop-down and static drop-down fields.

Use Field Name as Place Holder

 to automatically use the field name as the placeholder text in the empty field.

Place Holder Text

Enter text that PhixFlow will display when the input field is empty. Placeholder text is shown slightly greyed out to distinguish it from text that:

  • either is entered by the user

  • or is read-only text.

The following options are only available for a view or a card container. 

Parent

The name of the form or area that this component is a part of.

Display Name

Enter a name to be displayed as the heading for this component. If no display name is set, the file name for the component is displayed.

View Name

Select the view that backs this card container or form. This means you can have aggregated data in the background filter of the card container or form.

Select First Row By Default

 to automatically select the first grid row or card when the screen is opened.

Refresh If Not Active

 to refresh the data in the component even if the parent screen is not active. Use this option if a user selection elsewhere in the application can affect the data in this component. 

 to refresh the data in the component when the screen becomes active.

Show Paging Bar

 to display the paging bar by default.

Default Page Size

Available for grid and card data components.

Specify the number of records to be displayed as:

  • rows in a grid

  • cards in a card component.

If not specified, PhixFlow uses the default page size set in System Configuration.

Use Custom Data Range

 to use the default data range, which is set in the Stream → Basic Settings → Data Range property. It determines whether this component displays records from:

  • either all recordsets

  • or the latest recordset only.

 to override the setting in the table backing the component. PhixFlow shows the Data Range property.

Data Range

Available when Use Custom Data Range is ticked.

This value is used instead of the data range specified on the table backing the component.  

Use Custom Default Filter

 to display the Default Filter field.

Default Filter

This field is available when Use Custom Default Filter is ticked. Select or add a filter. This overrides any default filter set in the original view.

Default Sort Order

Select or add a default order in which data will be displayed; see Sort Order.

Kanban Board 

This section is available when the Advanced → Type is Cards.

Kanban boards display records as cards in columns, with headings. The columns usually represent the status of the record. When a Kanban application user drags a card from one column to another, the default kanban drag action automatically updates these attributes to match those of the target column.

Example: a table may record information about status using the attributes StatusID and StatusName.

StatusID

StatusName

Data

StatusID

StatusName

Data

Use this attribute to identify the columns

Use this attribute to name the columns

 

01

Planned

Yes

02

In Progress

No

03

In Review

No

04

Done

Yes

Table 1: Example attributes for a kanban board

Use the following properties to set the columns and headers for the kanban board.  To specify the styles for the kanban board columns and headings, see Style Settings, below.

Field

Description

 

Field

Description

 

Kanban Columns

This field is required. Select an attribute from the list.

PhixFlow uses this attribute to create the kanban columns. Each value found for the attribute in the table data generates a column. PhixFlow displays the record as cards in the column that represents the value of this attribute.

In some cases, the attribute that you use to create the columns will have a data form that is not useful as a column heading. For example it may be a identifier, rather than a name. In this case, specify Kanban Column Headings.

The columns are restricted to those found in the data.

To display kanban columns for all possible values of the selected attribute, tick Evaluate Kanban Columns as Expression. PhixFlow adds the expression fields:

  • Kanban Column Expression

  • Kanban Column Headings Expression, when you select a Kanban Column Headings attribute.

Enter an expression that defines all the columns and (optionally) their headings.

Kanban Column Headings

Optionally, specify the attribute to create the kanban column headings. Select an attribute from the list. 

This attribute must have values that correspond to the values in the Kanban Columns attribute. For example, if you select a Kanban Columns attribute of StatusID, the corresponding attribute for column headings is StatusName, as shown in the Table 1 above.

Evaluate Kanban Columns as Expression

 to display expression fields. Enter expressions to specify the full set of columns and headings that you require. Columns remain visible on the board even when there are no records to display in them.

To ensure kanban boards are responsive, expressions can only take a subset of functions; see Responsive Functions.

Kanban Column Expression

Available when a Kanban Columns is selected and Evaluate Kanban Columns as Expression is ticked.

Enter an expression to specify which columns appear on the board.

Your expression can directly specify all the columns/headings.

If you want the flexibility of changing the kanban columns over time, consider having a table in which all the attributes for the kanban columns and their headings are defined. Use the expression to refer to the table. When you update the table, the kanban board will automatically be updated.