Celonis Product Documentation

dateAttribute

true

Record.Attribute

References an attribute of type Date or Timestamp defined in the Knowledge Model.

name

false

String

Defines the name displayed above the component.

label

false

String

Defines a custom label that should be displayed.

Click here to see screenshot

dateFormat

false

Date

"%Y-%m-%d", "%d-%m-%Y", "%m-%d-%Y".

'%Y-%m-%d'

Defines the date format in which the selected date will be displayed.

Click here to see screenshot

styles

false

Enum

styles

Contains the styling option styles.

styles

false

Enum

horizontal

vertical

-

Contains different style options such as horizontal and vertical alignment.

horizontal

false

Enum

full

right

center

left

full

Defines the horizontal alignment of the component.

vertical

false

Enum

top

center

bottom

bottom

Defines the vertical position with the given layout.

onChange

update

variables

endDate: 

formattedEndDate: 

formattedStartDate: 

startDate: 

false

View Variable

Runtime Variable

Defines the variable into which the selected value will be written. You can then make use of the variable at different components.

metadata:
  key: time-filter-variable
  name: Time Filter Variable
  knowledgeModelKey: pizzap2p
variables: #Defines the variables we are going to populate with the time-filter values
  - name: START_DATE_AS_NUMBER
  - name: START_DATE_AS_STRING
  - name: END_DATE_AS_NUMBER
  - name: END_DATE_AS_STRING
layout:
  rows:
    - id: row1
      columns:
        - id: col1
          componentId: time-filter-dateformat
          size: "1"
          order: 100
      order: 100
    - id: row2
      columns:
        - id: col2
          componentId: input1
          size: "1"
          order: 100
      order: 200
    - id: row3
      columns:
        - id: col3
          componentId: input2
          size: "1"
          order: 100
      order: 300
    - id: row4
      columns:
        - id: col4
          componentId: input3
          size: "1"
          order: 100
      order: 400
    - id: row5
      columns:
        - id: col5
          componentId: input4
          size: "1"
          order: 100
      order: 500
    - id: row6
      columns:
        - id: col6
          componentId: text-box
          size: "1"
          order: 100
      order: 600
components:
  - id: text-box
    type: text-box
    settings:
      name: Name
      content: >
        The start date is ${START_DATE_AS_STRING} The end date is
        ${END_DATE_AS_STRING}
  - id: time-filter-dateformat
    type: time-filter
    settings:
      name: Setting variables from Time Filter
      dateAttribute: ACTIVITIES
      dateFormat: "%Y-%m-%d"
      onChange: #Updates the different values with the selected values
        update:
          variables:
            startDate: START_DATE_AS_NUMBER
            endDate: END_DATE_AS_NUMBER
            formattedStartDate: START_DATE_AS_STRING
            formattedEndDate: END_DATE_AS_STRING
  - id: input1
    type: input-box
    settings:
      placeholderText: "Start Date : ${START_DATE_AS_NUMBER}"
      type: string
      format: string
      value: string
  - id: input2
    type: input-box
    settings:
      placeholderText: "End Date : ${END_DATE_AS_NUMBER}"
      type: string
      format: string
      value: string
  - id: input3
    type: input-box
    settings:
      placeholderText: "Start Date as Date String : ${START_DATE_AS_STRING}"
      type: string
      format: string
      value: string
  - id: input4
    type: input-box
    settings:
      placeholderText: "End Date as Date String : ${END_DATE_AS_STRING}"
      type: string
      format: string
      value: string