Text
Element type: Dictionary
Display a text field which can be filled by the user.
Keys
Name | Type | Possible values | Required |
---|---|---|---|
Type | String | Input | Required |
InputType | String | Text | Required |
Variable | String | - | Required |
Label | String | - | |
LabelFontConfiguration | Dictionary (Font) | - | |
Distribution | String | Fit , Center | |
PercentWidth | Number | 0...1 | |
Placeholder | String | ||
Validation | Dictionary | ||
Margins | Dictionary (Margins) | - | |
Border | Dictionary (Border) | - | |
Condition PRO | Dictionary (Condition) | - |
Detail
Type Required
Type: String
Explanation: The type of the component has to be Input
.
InputType Required
Type: String
Explanation: The type of the component has to be Text
.
Variable Required
Type: String
Explanation: The variable used within the application and as the key used in the input file Octory will create to let you retrieve the user inputs.
Label
Type: String
Explanation: The label lets you give some insight to the end user about the value they need to enter. Its text will generally be placed on the left side of the input field.
If you do not specify a label, the input field will be centered. To keep the alignment with other input components which have a label, give the Label
a whitespace for value.
LabelFontConfiguration
Type: Dictionary (Font)
Explanation: Let you specify the font configuration to use. Default is "DefaultPrimary" if specified in the Font styles in the configuration file, or system font otherwise.
Distribution
Type: String
Possible values: Fit
, Center
Default: Center
Explanation: Specify how the label and the input field are stacked.
Fit
gives them as much space as they need, but the input component will not be aligned with the other ones.Center
align the label and the input field in the horizontal middle of its container. This allow several input components to be aligned, although it may crop the text label.
PercentWidth
Type: Number
Possible values: 0...1
Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. Default is most often 0.4.
Placeholder
Type: Number
Explanation: Text which appears in the text field to show to the end user what kind of value is needed.
Validation
Type: Dictionary
Explanation: Allows you to validate the value entered by the user in the TextInput
Component.
Input Text Validation
Name | Type | Required |
---|---|---|
WarningText | String | |
FontConfiguration | Dictionary (Font) | |
Regex | String | Required |
WarningText
Type: String
Explanation: The text to display to the user when the input is empty or its value is incorrect. Default is "Incorrect or empty value".
FontConfiguration
Type: Dictionary (Font)
Explanation: The font configuration to use for the warning text.
Regex Required
Type: String
Explanation: The pattern regular expression to use to validate the user input.
Margins
Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.
Border
Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.
Condition PRO
Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.
Example
Ask for the user’s Mac asset tag, with a validation to authorize patterns like 3 groups of 3 alphanumeric characters, separated by hyphens.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- ... -->
<key>Slides</key>
<array>
<dict>
<key>Containers</key>
<array>
<dict>
<key>Components</key>
<array>
<dict>
<key>Type</key>
<string>Input</string>
<key>InputType</key>
<string>Text</string>
<key>Label</key>
<string>What is your Mac asset tag ?</string>
<key>Variable</key>
<string>AssetTag</string>
<key>Placeholder</key>
<string>ABC-178-CD5</string>
<key>Validation</key>
<dict>
<key>Regex</key>
<string>[a-zA-Z0-9]{3}-[a-zA-Z0-9]{3}-[a-zA-Z0-9]{3}</string>
<key>WarningText</key>
<string>Empty or incorrect format</string>
</dict>
</dict>
</array>
</dict>
</array>
</dict>
</array>
<!-- ... -->
</dict>
</plist>