Skip to main content

Celonis Product Documentation

Time Filter
Overview

Placement

Create a new View

or

Profile View

Required KM objects

Record.Attribute of type Date or Timestamp

Introduction to Time Filters

Use the "Time Filter" component on (Profile) Views to enable your users to filter the View by a selected date.

41190557.gif

Overview

Placement

View or

Profile View

Required KM objects

Record.Attribute of type Date or Timestamp

Basic Configuration

To configure a time filter, you only need to define the dateAttribute.

Attribute

Required

Type

Description

dateAttribute

true

Record.Attribute

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

Info

optimised for component editor

id: time-filter-b30c5788-7a7a-4882-9f58-3f4579360742
type: time-filter    
settings:
  dateAttribute: ACTIVITY.EVENTTIME
Advanced Configuration

Further more advanced configuration options are available:

Attribute

Required

Type

Possible values

Default Value

Description

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

57542056.png

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

57542057.png

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: ${endDateVariable}

formattedEndDate: ${formattedEndDateVariable}

formattedStartDate: ${formattedStartDateVariable}

startDate: ${startDateVariable}

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

Info

optimised for component editor

id: time-filter-503e60b0-1376-4afe-b88e-66776530a770
type: time-filter
settings:
  dateAttribute: CEL_O2C_ACTIVITIES.EVENTTIME
  name: Event Time
  label: Label
  dateFormat: "%d-%m-%Y"
  styles:
    position:
      horizontal: full
      vertical: bottom
  onChange:
    update:
      variables:
        endDate: ${endDateVariable}
        formattedEndDate: ${formattedEndDateVariable}
        formattedStartDate: ${formattedStartDateVariable}
        startDate: ${startDateVariable}