Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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.
Insert excerpt _property_toolbar _property_toolbar nopanel true
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
Basic Settings
Field | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name |
| ||||||||||||||||
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 table, changing the name of the Table Attributes does not affect the Mapping Name, so there is no need to alter existing expressions after the name change. | ||||||||||||||||
Allow Empty Row | Available for drop-down and fixed drop-down components.
| ||||||||||||||||
Cache Data | Available for drop-down and fixed drop-down components..
| ||||||||||||||||
Aggregate Function |
| ||||||||||||||||
Filter | Choose a filter from the drop down list or select
| ||||||||||||||||
The following options relate to actions.
| |||||||||||||||||
Action Method or | 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.
| ||||||||||||||||
Action Type | Available for buttons. Select one of the following action types that will run when the user clicks the button.
Alternatively, use the Action field to specify a table-action in which you can configure more details. | ||||||||||||||||
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:
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:
| ||||||||||||||||
End of options related to actions | |||||||||||||||||
Snap Grid Size | Available for container components:
Also available for basic layouts:
Specify the number of pixels that the component can grow or shrink when resizing in response to changes to the screen size. | ||||||||||||||||
Composite 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,
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.
| ||||||||||||||||
Layout Category
| Available for container components:
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.
| ||||||||||||||||
Default Value
| Available for data field components:
Select or enter a value to display in the field. PhixFlow uses this value if:
Note: This value is sent to the server if the input is missing. To not send a value to the server, see Placeholder below. | ||||||||||||||||
Do Not Trigger Automatic Data Refresh
| Available for Date and DateTime fields. Enabling this option stops any data-bound components (views, cards) driven by the field from automatically refreshing when the value in the field changes. | ||||||||||||||||
Date/Time Format | Available for the data field components:
Select the format in which to display the date or date time value. | ||||||||||||||||
Number Format | Available for the data field components:
Select the format in which to display the number value. The list of Number Formats is populated from the formats defined for your:
| ||||||||||||||||
Type | Available for dynamic text, drop-down and static drop-down components. Select one of the data types:
The data type determines how the selected data will be formatted.
| ||||||||||||||||
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. Note: URL components function in a similar way to form fields. This means they can be backed by an attribute in a table and the values will be displayed in the Record Details. | ||||||||||||||||
Expression | Available for URL display components. Enter an expression which, if true, determines the URL. | ||||||||||||||||
Multi-line |
| ||||||||||||||||
The following options are only available for date, date-time, number, string, drop-down, dynamic text and static drop-down fields. | |||||||||||||||||
Use Field Name as Place Holder |
| ||||||||||||||||
Place Holder Placeholder Text
| Enter text that PhixFlow will display when the input field is empty and no default value has been configured. Placeholder text is shown slightly greyed out to distinguish it from text that:
Note: This value is not sent to the server if the input is missing. To send a value to the server, see Default Value above. | ||||||||||||||||
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 |
| ||||||||||||||||
Refresh If Not Active |
| ||||||||||||||||
Show Paging Bar |
| ||||||||||||||||
Default Page Size | Available for grid and card data components. Specify the number of records to be displayed as:
If not specified, PhixFlow uses the default page size set in System Configuration. | ||||||||||||||||
Use Custom Data Range |
| ||||||||||||||||
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 |
| ||||||||||||||||
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. |
Tip | ||
---|---|---|
| ||
If a form drives other data bound components (e.g. card containers or grids) then pressing the return/enter key in a number or string field, or selecting a date using the date picker in a date field, will cause the driven components to refresh. Screen data will also refresh when a toggle component changes state, see Event Handlersee Connecting Actionflows to Events. To disable this behaviour for Date and DateTime fields, see Do Not Trigger Automatic Data Refresh. |
Excerpt | ||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||
Drop Down FiltersSpecify filter rules that PhixFlow applies to the drop down data before it is displayed.
|
Excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Backing Attribute
|
Kanban Board Anchor kanban_board kanban_board
kanban_board | |
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 |
---|---|---|
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 Styles, below.
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. |
To display kanban columns for all possible values of the selected attribute, tick Evaluate Kanban Columns as Expression. PhixFlow adds the expression fields:
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 | |||||||||
Evaluate Kanban Columns as Expression |
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. To ensure kanban boards are responsive, expressions can only take a subset of functions. | ||||||||
Kanban Column Headings Expression | Available when a Kanban Column Headings is selected and Evaluate Kanban Columns as Expression is ticked. Enter an expression to specify which column names appear on the board. |
Background Filter Rules
Available for data view components and card containers. Specify a background filter that PhixFlow applies to the table data before it is displayed in the component.
Field | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Evaluate These Filter Rules as an Or | Specify how to combine the Background Filter Rules.
| ||||||||||||||||
Background Filter Rules | This section has a toolbar with standard buttons. See Common Properties. The grid contains a list of the background filter rules that are combined together to create the background filter for the component. To add a filter rule to the list, click
For information about the details shown in the grid, see Filter Rule. |
Excerpt | ||||||
---|---|---|---|---|---|---|
| ||||||
Preferred Parent Categories
This section includes a list of the Preferred Parent Categories the component can be dragged onto. For example, a button template can have a preferred parent category of button bar, therefore when the button template is dragged onto a screen the button bar will highlight indicating it is a preferred parent for the button template. This property relates to configuring preferred parents for components; see Component Categories and Preferred Parents. To add a category, open the repository Layout Categories section and drag one into the list. |
File Display
See File Display
Advanced
Field | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Type |
| ||||||||||||
View Type | Available for area components. Optionally select one of the following to set additional behaviour for an area.
| ||||||||||||
Internal Icon Source |
| Optionally specify either an internal or an external icon source. If you specify both, PhixFlow will use the Internal Icon Source. When you add a component to the palette, PhixFlow uses the image as the icon in the palette. If you do not specify an image, PhixFlow uses a default icon based on the component type. | |||||||||||
External Icon Source |
| ||||||||||||
Test Handle | Enter a name that you can use for this component, when you are running automated tests on your application. | ||||||||||||
Template | Read-only. Available for components that have been added to a palette.
| ||||||||||||
Palette Label | Available for components and layouts that have been added to a palette. Optionally, enter a label that will appear below this component when it is displayed in the palette. This is useful if you want a shorter or more descriptive label than the component name, which is displayed by default. |
Excerpt | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
Description
|
Validation
Field | Description |
---|---|
Validation Type | Select an existing or create a new Validation Type. The selected Validation Type sets the criteria for an input field to be considered valid. For example, the criteria that determine if an email address is valid or if the value entered in a field is long enough. |
Mandatory | Defines if it is mandatory to enter a value in the form field. |
Error Message | The error message that gets displayed to the user when they mouse over a form field that does not satisfy the criteria of the validation type. |
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Style Settings
Anchor | ||||
---|---|---|---|---|
|
Select formatting properties for the current component; see Style properties, as they are the same as the Style Settings here.
Excerpt | ||
---|---|---|
| ||
PhixFlow uses the style settings to construct CSS for the component; see w3schools.com CSS for details of CSS. If the formatting you require is not available in this section, you can also create custom styling, see CSS Properties. PhixFlow applies the style to the component when you save changes to the properties tab. |
In addition to the standard style properties, this section includes the following settings related to kanban boards.
Field | Description | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Kanban Column Style | Available when a Kanban Board → Kanban Column attribute is selected. | Select a Style to format the kanban board columns and their headers.
| ||||||||||||||||
Kanban Header Style | ||||||||||||||||||
Header Style | ||||||||||||||||||
Remaining properties | The rest of the Style Settings properties are the same as those that you can set in a Style. |
Tip |
---|
Style settings include adding scrollbars. Grid and card container components that have scrollbars can also scroll automatically. This means users can drag cards or grid items to targets that are currently off-screen.
Automatic scrolling can be:
|
Excerpt | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
Shared StylesShared Styles are reusable styles that can be applied to multiple components. Editing a shared style will impact all components where it is being used, therefore proceed with caution when editing and deleting. See Style. Click Show the List of Styles to see the styles available in the repository. You can drag styles from the repository into the grid to add a shared style to this component. CSS PropertiesA list of CSS properties. Click
Formatting RulesA list of rules about when to apply formatting. Click
|
Position Settings
Field | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|
Order | The order of the component. | ||||||||
Tab Index | The order of the tab. | ||||||||
Width | The width of the component; https://www.w3schools.com/cssref/pr_dim_width.asp | ||||||||
Height | The height of the component; https://www.w3schools.com/cssref/pr_dim_height.asp | ||||||||
Top | The top of the component; https://www.w3schools.com/cssref/pr_pos_top.asp | ||||||||
Left | The left of the component; https://www.w3schools.com/cssref/pr_pos_left.asp | ||||||||
Right | The right of the component; https://www.w3schools.com/cssref/pr_pos_right.asp | ||||||||
Bottom | The bottom of the component; https://www.w3schools.com/cssref/pr_pos_bottom.asp | ||||||||
Prevent Dragging |
|
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Excerpt | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
Event HandlersThis section has a toolbar with standard buttons. The grid contains a list of event handlers configured for this component. Event handlers use a user action, such as a mouse-click, to trigger a table-action or actionflow to run. To add an event handler:
To remove an event handler, use the toolbar button
|
Excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Drop TargetsA list of rules of the action drop-targets on this component. Click
|
Excerpt | ||
---|---|---|
| ||
MappingsThis section is only available for components that can have actions, such as buttons, views and cards. This means you can map attributes that have different names. PhixFlow will evaluate all the mapped datasets when it runs the action. |
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Creating Background Filters Within a Component
As well as using the properties tab to set up background filters, you can apply them within an unlocked screen or component that contains a grid view.
In the component, drag the column header from a grid view onto a form or card. This creates a background filter using the backing attribute. When you then select a different row in the grid view, the contents of the form or card is updated to show the details for the selected row.
If the backing table no longer contains an attribute that appears as a column header in the grid view, PhixFlow prompts you to select an alternative attribute of the same type, if one is available. If the backing table has no attributes of the same type, PhixFlow reports and error.
Understanding Kanban Boards
A kanban board is a project tracking tool that shows work at various stages of a process. Each column represents a stage in the process. Each piece of work is represented by a card. See Making Kanban Boards.
Card components have properties so that you can easily create kanban boards. In the Kanban Board section, select an attribute from the backing table to define kanban columns, and optionally their headings. PhixFlow creates one card for each record in the table, and displays it in the appropriate column. To define the styles for the columns and headings, use the options in Style Settings.
There are two ways to move cards to different columns.
- Either update the backing table. When you refresh the kanban board, PhixFlow automatically moves the cards to the columns that reflect their stage in the process.
- Or drag a card from one column to another. PhixFlow automatically updates the values of its kanban attributes to reflect the target column.
Example
The backing table for a component has the attribute Status, which can have the values:
- Not started
- In progress
- Blocked
- Done
PhixFlow uses these values to create 4 columns, and uses the status values as the headings. Each record is displayed as a card. The Status attribute determines which column the card is in. You can drag a card between columns, for example from Not started to In progress. In the backing table, PhixFlow updates the Status of the record to In Progress.
Component Pop-up Menu
Right-click on a component to show the pop-up menu. The options vary for different types of component. Options for screens will be listed:
- either in the pop-up menu itself
- or in the
Options sub-menu.Insert excerpt _screen _screen nopanel true
In the following table, the menu options are grouped according to purpose. This may not be the order in which the options appear in the menu.
Menu option | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Fixing and Moving | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| When a screen is locked, unlock to make changes. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Lock a screen to display the data content. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Pin or unpin a component. You can drag unpinned components to different locations in the screen. Unpinned components will move if another component is dropped on or near them. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Fix the height of the selected component. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Options to arrange the selected components:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Information | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the properties tab for the component. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the properties tab for the screen. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the properties tab for the table. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the list of context parameters. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the list of attributes for the table. This option is available when a screen or component has a backing table or view | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the list of attributes for the table. This option is available when a screen or component has a backing view as well as a backing table or view. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open a window showing the record. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the repository with the component's name highlighted. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open a new mapping properties tab. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Adding | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| For new screens, add a form container. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Open the palette to drag in templates. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Add a vertical bar to the current area. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Add a horizontal bar to the current area. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Selecting | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| For the selected area or container, select all the components contained in it. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Copy as Template | Use the selected item as a template. This also copies any background filter rules and data mapping to the template. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleting | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Delete the selected component from the screen. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Delete the selected component from the screen, and everywhere it is used. |
Charting
For information in charting such as pie charts or line graphs see Creating Dashboards and Reports.
Live Search | ||||||||
---|---|---|---|---|---|---|---|---|
|
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Learn More
For links to all pages in this topic, see Designing Screens.
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|