Space TimelineSpace Timeline

Field Settings (common)

The following settings are available for most Field Types:

Setting

Description

Setting

Description

Field ID

Unique internal identifier of the field. This is a read-only field. Field ID is automatically created when a new field is placed on a page.

Field Label

Used for most field types except Document Viewer, Domain Tile Selection, Separator, and Navigation Menu.
This is the name of the field that is visible to the user and is displayed above or next to the field, or on top of an Action button. Leave this field blank, if no text should be visible to the user. Labels support double-bracketed interpolation: {{ expression }}

Use label as a placeholder

Used for those field types, where the user may enter data freely. Appears as a tip inside the field. If deselected, a different placeholder text can be specified.

Placeholder

Text that will be visible to the user inside the field as a tip.

Info message

A rich text message that appears as a tool-tip next to the field label, when the user hovers over the icon.

Info message header

A heading for the tool-tip message. Appears in a bold, larger font, one line above the rest of the text.

Example:

Tool-tip info message with a header

Info message position

Controls how the tool-tip text is aligned relative to the icon.

Meta Field Name

Used for all field types that may carry data to the system. This is the unique name for the data held within the field as it is referenced by code and in the database. If the data from this field must be mapped to a specific field in a PDF form, use the predefined values from the Field Names Table. If the data is only used for the purposes of this wizard, e.g. as a selector for further transitions, then you may create any name for it. Notation for Meta Field Names is described in How to Choose a Meta Field Name.

Sample: Rep1.RepNumber, WizardChoice.MoreFilesAttached, Owner1.HomeAddrStateFull_US_code

Warning! This is a mandatory setting. If left empty for any of the fields, the wizard will not function properly. This issue is logged in the console. When a wizard doesn't load (a blank screen appears to the user), please check the console for configuration errors.

Warning! Unless the name comes from the Quick field list, the Meta Field Name must start with a letter. It may contain letters, numbers and underscores ("_"). Other characters are not permitted and will prevent the wizard from functioning properly.

On value change

JS code that will be performed, when the value in this field has been changed (by the user or from widget code). If necessary, the previous field value can be referenced from code as oldValue.

Initial value

A JavaScript expression that provides a specific value that is used as the default value for this field. It is shown and selected as the first value for this field when the user opens the page. E.g., a choice in a drop-down, that is initially selected, or a string in a text field that is already filled in. To enter a string or a value from choices, use quotes. E.g. "Yes" The JS expression's execution context has only 2 variables:

  • field - field configuration

  • application - same as $scope.widgetApp

Validations

Validations that will be performed for the specific field. This setting overrides the default validations defined in the Wizard settings.
To create several blocks of validations, click +Add at the bottom of this section.

Use default validations

Enables 'Default validation' configured in the Wizard settings to be run on this field.

Hide validation errors

Hides all validation errors for this field.

ID

Unique identifier for this rule. This ID can be used to distinguish validation errors programmatically.

Description

Description of the rule understandable to you and other developers.

Async checkbox

With asynchronous validation enabled, an expression can return a Promise that resolves with validation result.

Debounce delay

The amount of time in milliseconds, that needs to pass after the last value has changed, for the validation to be executed. Asynchronous validations are usually run on the server-side. With the delay, the server will not run the validation for every value change, but only when the user has finished entering data into the field.

Expression

JavaScript expression that returns a validation result, which can be one of the following:

  • undefined, null, false, 0, '' (or any falsy value) - means that the value is invalid. The text entered in the Error Message field will be displayed to the user.

  • true (or any truthy value, except for object) - means that the value is valid.

  • object with the following structure (an object with an invalid structure will cause an error and value will be considered invalid):

{ id: string // id for this validation rule isFulfilled: boolean // true if the rule is fulfilled error: { id: string // id for this error description: string // error text that will be shown // to the user instead of the 'Error Message' } }

Error message

Error message text that will be shown to the user.

Column Span

The page of the wizard is divided into two invisible columns. These values can be used:

  • 1 – the field uses space of one column on the page (or less, if the Size by content option is selected),

  • 2 – the field is stretched across the entire width of the page (two columns).

Note: The column span is ignored when the Size by content setting is selected.

Enabled condition

Boolean JavaScript expression. If the result evaluates to TRUE or if this setting is left empty, the field will be available for editing to the user, visible and enabled. Otherwise, it will be disabled and will not be rendered on the page. The value of a disabled field will not be saved to a Work Item, but it will remain available in the $scope.startingPointData object.

Visibility Condition

Boolean JavaScript expression. If the result evaluates to TRUE or if this setting is left empty, the field will be visible to the user. Otherwise, the field will not be rendered on the page.

Read-Only Condition

Boolean JavaScript expression. If the result evaluates to TRUE, the field will be visible to the user, but as a read-only value. Otherwise, it will be editable.

Default Value

A JavaScript expression that provides a "hard-coded" value for this field. It will be used as the value for this field even if the user tries to change it. Usually used for fields that are hidden to the user. To enter a string or a value from choices, use quotes. E.g. "Yes"
You may also use JS expressions to calculate the value. For example, value == undefined ? 'N/A': value will set the value to "N/A" if the user does not enter any value himself.

The JS expression's execution context has only 2 variables:

  • field - field configuration

  • application - same as $scope.widgetApp

Required

If selected, the user will be required to fill in this field. This is a built-in validation. An asterisk will be displayed next to the field label.

New Line

If selected, the field will start on a new line on the page.

Size by content

If the option is selected, the size of the field will change (stretch) to match the content in it.

The Column Span and Horizontal Alignment settings will be ignored.

This allows to place more than two fields on the same row.

If the option is not selected, the field will take up one or two columns on the page, depending on the value in the Column Span field.

Custom content

HTML content (that may contain JavaScript, CSS, and double-bracketed interpolation objects within its HTML tags). This content is added below the contents of the field or within the field group, below all fields.

Example:
<p>Concatenated string is: {{startingPointData.Word1}}{{startingPointData.Word2}}.</p>

CSS class names

One or several space-separated CSS class names defined in CSS/LESS or Global CSS/LESS tab. (Do not use periods before class names in this field.)

Example: myBoldText myBlueBkgr myH3