Skip to main content

Celonis Product Documentation

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.

41190440.png
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.

Note

Placeholder 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.

Note

This 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