Configuring an input box for legacy views
Legacy view component
You're currently viewing a topic about a legacy view component in Studio. This component can still be used in legacy Studio views, however we recommend using the visual view editor in the new Studio experience. The updated interface includes drag and drop capabilities, allowing you to easily add components and configure your views.
For more information, see: Views.
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
To configure a basic input box component, the following attributes are available:
Attribute | Required | Type | Possible values | Default Value | Description |
|---|---|---|---|---|---|
type | Yes | 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. |
And the YAML example for a basic input box configuration:
- id: input-box type: input-box settings: type: string
Advanced input box configuration
To configure an advanced image component, the following attributes are available:
Attribute | Required | Type | Possible values | Default Value | Description |
|---|---|---|---|---|---|
styles | No | Defines the different styles you can apply to the component. | |||
position | No | Defines that the position of the component within the given layout. | |||
horizontal | No | Enum | full left center right | left | Defines the horizontal alignment position within the given layout. |
vertical | No | Enum | top center bottom | bottom | Defines the vertical alignment position with the given layout. |
placeholderText | No | String | - | - | Defines the text within the input box. NotePlaceholder text can only be used with type: string or number |
value | No | 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: | No | Defines the variable you would like to update with the new inputted value. For more information about variables, click here. Configuration of variables YAML variables: - name: textinput defaultValue: defaultValue #this is optional Using the input from input box in other components YAML - 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 | No | String |
| - | Defines the format of the variable. Configuration of variables YAML variables: - name: numbervalue format:"f" |
And the YAML example for an advanced input box configuration:
- 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