Input Box
Overview
Placement | or |
Required KM objects | None |
Introduction to Input Box
Use the Input Box component in your views when you would like to record a manually entered value from users and use it throughout your view. It is a great way to allow for user interaction.
 |
Basic Input Box configuration
Please find below an example of the most basic configuration of an inputbox component:
Attribute | Required | Type | Possible values | Default Value | Description | |||
|---|---|---|---|---|---|---|---|---|
type |
| Boolean | string date number time | - | Defines the type of data that will be inputted by the user. The structure of the input box in the view will change slightly depending on what data type is selected to help ensure the user knows what value is expected. String:
Date: Number:
Time:
|
Info
optimisedforcomponenteditor
- id: input-box type: input-box settings: type: string
Advanced configuration
In addition to the basic configuration, the following additional configuration options are also available.
Attribute | Required | Type | Possible values | Default Value | Description |
|---|---|---|---|---|---|
styles | false |
|
|
| Defines the different styles you can apply to the component. |
position | false |
|
|
| Defines that the position of the component within the given layout. |
horizontal | false | Enum | full left center right | left | Defines the horizontal alignment position within the given layout. |
vertical | false | Enum | top center bottom | bottom | Defines the vertical alignment position with the given layout. |
placeholderText | false | String | - | - | Defines the text within the input box. NotePlaceholder text can only be used with type: string or number |
value | false | Integer | - | - | Defines a number to be pre-selected in the view's input box. NoteThis cannot be used with placeholder text and can only be used with "number" input types. |
onChange update: variables: - name: | false |
|
|
| Defines the variable you would like to update with the new inputted value. For more information about variables, click here. Configuration of variables variables: - name: textinput defaultValue: defaultValue #this is optional Using the input from input box in other components - id: button
type: button-list
settings:
buttons:
- label: Run simulation
onClick:
executeSkill:
skillKey: main-package.my-simulation-skill
variables:
- name: textinput
value: ${textinput}In this example, you would allow a user to enter a value that is used as an input in a button to execute a skill. |
format | false | String | All format options here | - | Defines the format of the variable.Configuration of variables variables: - name: numbervalue format:"f" |
- id: input-box type: input-box settings: styles: position: horizontal: right vertical: bottom placeholderText: Type your text here type: string onChange: update: variables: - name: textinput