Input UI Element
Description
Displays a text input field.
May be used by
Properties
Label (
label) Description
Label for the input field. The UI treats it as a key to translate. If there is no translation, the configured value is what is shown in the UI.
Attributes
String
Mandatory
Validation RegEx: [a-zA-Z0-9]+((\.|-)[a-zA-Z0-9]+)*
Property (
property) Description
The input field's property. This property will be sent to the server via REST as part of a JSON object. For example, if the property name is 'otp' and the user enters '4123' into the field, the JSON sent to the server will be as follows: {"otp": "4123"}. Values can also be nested using the dot notation. For example, if the property name is 'attributes.badge' and the user enters 'abc' into the field, the JSON sent to the server will be as follows: {"attributes": {"badge": "abc"}}
Attributes
String
Mandatory
Validation RegEx: [a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*
Example
otp
Example
phoneNumber
Example
attributes.badge
Placeholder (
placeholder) Description
Displays the placeholder if the field has no value.
Attributes
String
Optional
Mask Input (
maskInput) Description
Mask the input field to not show the characters written into the field.
Attributes
Boolean
Optional
Default value
false
Validations (
validations) Description
The validations on the input field.
Attributes
Plugin-List
Optional
Assignable plugins
Submit To Server (
submitToServer) Description
If enabled, this value is submitted to the server. Otherwise, it is only used locally (e.g. to confirm inputs of other fields).
Attributes
Boolean
Optional
Default value
true
HTML ID (
htmlId) Description
The ID of the element in the HTML. If no ID is set, the 'property' is used as the ID.
Attributes
String
Optional
Validation RegEx: [a-zA-Z0-9_]+
Input Purpose (
inputPurpose) Description
The input purpose allows labeling data items using standardized values (see https://www.w3.org/TR/WCAG22/#input-purposes).
It is rendered using the HTML attribute "autocomplete". Browsers can use this to automatically fill input fields with data that was previously entered in other fields with the same purpose.
Attributes
String
Optional
Suggested values
name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, organization-title, username, new-password, current-password, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, url, photo, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-local-prefix, tel-local-suffix, tel-extension, email, impp
Initial Value Query (
initialValueQuery) Description
JSONPath query to fetch the field value from the initial REST call response. Requires an initial REST call to be configured in this custom step UI. If the query yields multiple results, the first one is set as the initial value and all others are discarded.
Note:
This query yields multiple results.
The first one is set to the initial value, the rest is discarded. $..givenname User1
See the JSONPath documentation for the full documentation: https://github.com/dchester/jsonpath
Examples:Assume the initial REST call returns the following JSON response:
{
"meta": {
"type": "jsonapi.metadata.document",
"timestamp": "2023-03-10T13:06:01.294+02:00"
},
"data": [
{
"type": "user",
"id": "user1",
"attributes": {
"contextData": {
"givenname": "User1",
"surname": "FSMTest",
"roles": "customerA"
}
}
},
{
"type": "user",
"id": "user2",
"attributes": {
"contextData": {
"givenname": "User2",
"surname": "FSMTest",
"roles": "customerB"
}
}
}
]
}
The following table shows the results of various JSONPath queries given the JSON above:
Description JSONPath Query Extracted Initial Value Static path from the root $.meta.type jsonapi.metadata.document The role of the user whose id equals "user1" $.data[?(@.id == 'user1')].attributes.contextData.roles customer The number of users $.data.length 2 All "givenname" attributesNote:
This query yields multiple results.
The first one is set to the initial value, the rest is discarded. $..givenname User1
Attributes
String
Optional
Example
$.store.bicycle.color
Example
$..phoneNumber
Example
$..data[?(@.id == 'street')].attributes.currentValue
YAML Template (with default values)
type: ConfigurableUiInputField
id: ConfigurableUiInputField-xxxxxx
displayName:
comment:
properties:
htmlId:
initialValueQuery:
inputPurpose:
label:
maskInput: false
placeholder:
property:
submitToServer: true
validations: