Skip to main content

Celonis Product Documentation

Input Box
Overview

Placement

View

or

Profile View

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.

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

57541663.png

Date:

Number:

57541664.png

Time:

57541665.png

Info

optimised for component editor

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

format

false

String

All format options here

-

Defines the format of the variable.

placeholderText

false

String

-

-

Defines the text within the input box.

Note

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

Note

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

- id: input-box
  type: input-box
  settings: 
    styles:
      position:
        horizontal: right
        vertical: bottom
    placeholderText: Type your text here 
    type: string
        format: string 
        value: string 
    onChange:
      update:
        variables:
          - name: textinput