Skip to main content

Celonis Product Documentation

Display rules and icons

You can customize KPI lists, tables, attributes lists, and histograms by applying display rules and styling to them. These display rules must first be defined in your knowledge model as a custom object, before then being added to your view compoment YAML configurations.

Define a custom object in your knowledge model

To define your custom object, use the following YAML example:

- id: DISPLAY_RULE
  displayName: Display rule
  customAttributes:
  # comparator is used to compare value from ``DISPLAY_RULE.customAttributes.value`` to the value from PQL
  - comparator: GREATER_THAN_OR_EQUAL
    # value to compare
    value: 1000 #In case you use the comparator BETWEEN you would define the value as following 'value: [ 8, 15 ]'
    # styles to change cell appearance
    style:
      textColor: red # CSS color or HEX code
      backgroundColor: black
      fontSize: 16px
      fontItalic: true
      fontWeight: bold

You can then reference this display rule in your view's YAML configuration:

- id: attribute
  type: attribute
  settings:
    data:
      - id: INVOICE.TOTAL_NUMBER_OF_INVOICES
        displayContentRule: DISPLAY_RULE
      - id: INVOICE.TABLE_COUNT
        displayContentRule: TABLE_COUNT_DISPLAY_RULE
Supported visual styling

You can visually customize your view by adding the following styling keys:

Key

Type

Accepted Values

Supported View Components

iconName:

String

See Supported display rule comparators

  • Attribute list

  • KPI list

  • Table

iconSize:

Number

Size in pixels

For example: 100px

  • Attribute list

  • KPI list

  • Table

iconFont:

Boolean

True

False

  • Attribute list

  • KPI list

  • Table

avatar:

Boolean

True

False

  • Attribute list

  • KPI list

  • Table

avatarUrl:

String

An active URL

  • Attribute list

  • KPI list

  • Table

avatarColor:

String

HEX of CSS color

For example: #34ebeb

  • Attribute list

  • KPI list

  • Table

avatarSize:

String

xs

sm

md

lg

xl

  • Attribute list

  • KPI list

  • Table

iconPosition:

String

LEFT

RIGHT

ONLY_ICON

  • Attribute list

  • KPI list

  • Table

label:

Boolean

True

False

  • Attribute list

  • KPI list

  • Table

backgroundColor:

String

HEX of CSS color

For example: #34ebeb

  • Attribute list

  • Histogram

  • KPI list

  • Table

textColor:

String

HEX of CSS color

For example: #34ebeb

  • Attribute list

  • KPI list

  • Table

border:

String

See CSS Border Property

  • Attribute list

  • KPI list

  • Table

borderRadius:

String

Size in pixels

For example: 2px

  • Attribute list

  • KPI list

  • Table

fontSize:

String

Size in pixels

For example: 10px

  • Attribute list

  • KPI list

  • Table

fontItalic:

Boolean

True

False

  • Attribute list

  • KPI list

  • Table

fontWeight:

String

See CSS Font Weight Property

  • Attribute list

  • KPI list

  • Table

Supported display rule comparators

You can use the following comparators for defining a display rule in your knowledge model:

comparator:
    "IS_EMPTY"  # for 'int' | 'float' | 'date' |  'string' 
    "IS_NOT_EMPTY"   # for 'int' | 'float' | 'date' |  'string'
    "TEXT_CONTAINS"  # for 'string'
    "TEXT_DOES_NOT_CONTAIN"  # for 'string'
    "TEXT_STARTS_WITH" # for 'string'
    "TEXT_ENDS_WITH" # for 'string'
    "TEXT_IS_EXACTLY" # for 'string'
    "DATE_IS" # for 'date'
    "DATE_IS_BEFORE"  # for 'date'
    "DATE_IS_AFTER"  # for 'date'
    "GREATER_THAN" # for 'int' | 'float' | 'date'
    "GREATER_THAN_OR_EQUAL" # for 'int' | 'float' | 'date'
    "LESS_THAN" # for 'int' | 'float' | 'date'
    "LESS_THAN_OR_EQUAL" # for 'int' | 'float' | 'date'
    "EQUAL" # for 'int' | 'float' | 'date' |  'string'
    "NOT_EQUAL" # for 'int' | 'float' | 'date' |  'string'
    "BETWEEN"  # for 'int' | 'float' | 'date'
    "NOT_BETWEEN"  # for 'int' | 'float' | 'date'
Icons

In addition to using icons in your display rules, you can insert icons into a number of view components (such as tables and buttons).

The YAML example for including an icon is:

style:
    textColor: green
    iconName: placeholder-filled
    iconPosition: RIGHT
    iconSize: 50
    backgroundColor: pink
Figure 1. Available icons for display rules:
Available icons for display rules:


Figure 2. Available icons for buttons:
Available icons for buttons: