Skip to main content

Celonis Product Documentation

KPI List
Overview

Placement

Create a new View

or

Profile View

Required KM objects

KPI

Introduction to KPI List

The KPI list component should be used to display key performance indicators (KPIs) within your view. These can give users a quick overview of how they are tracking based on business-critical metrics. This KPI list can be used for only display purposes (non-interactive) or used interactively to set variables and dynamically update your other components in your view.

57541585.png
Basic KPI List configuration

To configure a basic KPI list, you must have at least the following features defined.

Attribute

Required

Type

Description

kpi

true

list of buttons

References a KPI(s) from the Knowledge Model that the user wants to include in their KPI List.

show

true

Boolean

Defines if a KPI should be hidden or not. It gets auto-generated as "true" if not defined. The lowest number is displayed on the left side.

id

true

String

Defines a unique identifier for the field. It gets auto-generated if not defined. It is important in the context of Base and Extension.

order

true

Integer

Defines the order of the KPI list. Gets auto-generated if not defined. It is important in the context of Base and Extension.

Info

optimized for component editor

View

id: kpi-list-6c831052-b9f2-47b3-be43-6344c88cbb89
type: kpi-list
settings:
  data:
    kpis: 
    - kpi: TOTAL_NUMBER_OF_INVOICES
      show: true 
      id: id100
Advanced configuration

Since the KPI List contains many different configuration options, we have broken this section down into:

Click here to view an example YAML script for an advanced KPI List component

Info

optimised for component editor

View

id: kpi-list-b3c3f7c4-d440-49b8-9735-c9174e469b76
type: kpi-list
settings:
  options:
    size: sm 
    showSettings: true
    showBenchmark: true 
    showTarget: true 
    showPriority: true 
    sortBy: order
    sortDirection: ASC
  styles:
    overflow: line-break 
    position:
      horizontal: center 
      vertical: center 
  data:
    selectedKpi: TOTAL_NUMBER_OF_INVOICES
    kpis:
    - kpi: TOTAL_NUMBER_OF_INVOICES
      show: true
      displayContentRule: KPI_DISPLAY_RULE
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 200
    - kpi: TOTAL_NUMBER_OF_INVOICES_2
      show: true
      displayContentRule: KPI_DISPLAY_RULE
      id: 989ce3d4-fa5f-4fb8-8912-234a4e727bcc
      order: 100
    - kpi: TOTAL_INVOICE_VALUE
      show: true
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 300
      kpiParams:
        - id: TOTAL_INVOICE_VALUE 
          value: ${currency} 
    onClick:   
      update:    
        variables: 
            id: BOARD_INPUT_FOR_ID
            name: BOARD_INPUT_FOR_NAME

"Options" configuration options

The options sections contain all general settings which apply to the entire KPI List. Please find below an overview of the different configuration options:

Info

optimized for component editor

id: kpi-list-b3c3f7c4-d440-49b8-9735-c9174e469b76
type: kpi-list
settings:
  options:
    size: sm 
    showSettings: true
    showBenchmark: true 
    showTarget: true 
    showPriority: true 
    sortBy: order
    sortDirection: ASC
  data:
    selectedKpi: TOTAL_NUMBER_OF_INVOICES
    kpis:
    - kpi: TOTAL_NUMBER_OF_INVOICES
      show: true
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 200
    - kpi: TOTAL_NUMBER_OF_INVOICES_2
      show: true
      id: 989ce3d4-fa5f-4fb8-8912-234a4e727bcc
      order: 100

Attribute

Required

Type

Possible values

Default Value

Description

size

false

Boolean

sm

lg

non-interactive: small

interactive: large

Defines the font size of the KPIs.

View with large KPIs:

57541438.png

View with small KPIs:

57541439.png

showSettings

false

Boolean

true

false

false

Defines if a setting modal will be displayed for the KPI List in the user interface of the view. From this setting's modal, users can specify target values, re-order the KPIs, and hide/show KPIs in their view.

Note

The target is set and stored for the KPI itself, it will be reflected in all components where the KPI is used in.

KPI List with setting's modal enabled:

57541445.png

KPI setting's modal:

57541444.png

showTarget

false

Boolean

true

false

true

Defines if target information is displayed. Target information will only be displayed if the data is available. A red/green icon will display next to this target based on how you are currently tracking towards your target.

Note

Target values can only be set in the settings modal from the component user interface. To enable the interface set showSettings: true and click on the gear icon.

The target is set and stored for the KPI itself, it will be reflected in all components that the KPI is used in.

57541446.png

showBenchmark

false

Boolean

true

false

true

Defines if benchmark information is displayed. Benchmark information will only be displayed if the data is available. Benchmarking details can be specified for each individual KPI in the Knowledge Model.

shorwPriority

false

Boolean

true

false

true

Defines if priority information is displayed. Priority information will only be displayed in the data is available.

Note

Priority selection can only be set using the priority switcher tool and must be first added to your view to use it. Details on how to set this up can be found here.

KPI List with priority enabled:

57541451.png

sortBy

false

Boolean

value

name

order

order

Defines what method the KPI list should be sorted based on. Sorting options include:

  • Order: KPIs are listed by the order in which they are listed in the editor

  • Name: KPIs are listed in alphabetical order based on the KPI name

  • Value: KPIs are listed in order numerically based on the KPI value

sortDirection

false

Boolean

DESC

ASC

ASC

Defines the sorting direction of the KPIs based sorting method defined above.

"Data" configuration options

The field sections contain all KPI-specific settings. Please find below an overview of the different configuration options:

Info

optimised for component editor

id: kpi-list-b3c3f7c4-d440-49b8-9735-c9174e469b76
type: kpi-list
settings:
  data:
    selectedKpi: TOTAL_NUMBER_OF_INVOICES
    kpis:
    - kpi: TOTAL_NUMBER_OF_INVOICES
      show: true
      displayContentRule: KPI_DISPLAY_RULE
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 200
    - kpi: TOTAL_NUMBER_OF_INVOICES_2
      show: true
      displayContentRule: KPI_DISPLAY_RULE
      id: 989ce3d4-fa5f-4fb8-8912-234a4e727bcc
      order: 100
    - kpi: TOTAL_INVOICE_VALUE
      show: true
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 300
      kpiParams:
        - id: TOTAL_INVOICE_VALUE 
          value: ${currency}

Attribute

Required

Type

Possible values

Default Value

Description

selectedKpi

false

KPI

-

-

References a KPI which should be selected up-on page load.

onClick

update:

variables:

id:

false

Views Variables Package runtime Variables

-

-

You can use a KPI list to update a variable when clicking the KPI. After your KPI has an onClick event enabled, it will be displayed as an interactive tile.

41190635.gif

kpis

false

List of KPIs

-

-

Requires a list of KPIs you would like to configure.

displayContentRule

false

String

-

References a Display Rulein the Knowledge Model

Note

This configuration option is currently only currently available for interactive KPI List.

kpiParams

false

-

-

-

Allows defining Parameters that are also used in the Knowledge Model. More details on how to set a KPI parameter in the KPI can be found here .

id

false

String

-

-

Define the ID value of the parameter defined

Note

The KPI Parameter ID value record in the view must match KPI parameter ID defined in KM to work correctly.

value

false

Views Variables

-

-

Defines the value of the parameter that will be passed from the knowledge model.

Note

This value should be defined using a variable with the input coming from e.g. a dropdown component.

trend: timedimension: range:

Defines if a general trend marker should be displayed on the KPI List component. The general trend marker displays the percentage of change in the KPI value (also known as slope). You must define the time dimension (i.e. invoice date, closing date, etc.) and range (daily, weekly, monthly, or yearly) that the trend is calculated over. Once these are defined, a badge will be added to show the average increase or decrease per time period defined.

image__5_.png
"Styles" configuration options

The styles sections contain all settings you can use to style the KPI List component. Please find below an overview of the different configuration options:

Info

optimized for component editor

id: kpi-list-b3c3f7c4-d440-49b8-9735-c9174e469b76
type: kpi-list
settings:
  styles:
    overflow: line-break 
    position:
      horizontal: center 
      vertical: center 
  data:
    kpis:
    - kpi: TOTAL_NUMBER_OF_INVOICES
      show: true
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 200
    - kpi: TOTAL_NUMBER_OF_INVOICES_2
      show: true
      id: 989ce3d4-fa5f-4fb8-8912-234a4e727bcc
      order: 100
    - kpi: TOTAL_INVOICE_VALUE
      show: true
      id: 5d17010a-1818-48cd-9242-27f63c4d04a5
      order: 300

Attribute

Required

Type

Possible values

Default Value

Description

styles

false

overflow

false

Boolean

line-break

scroll

full-width

full-width

Defines the orientation of the KPI list component when the width of the selected KPIs exceeds the given component container size.

  • full-width: KPIs will be condensed to fit component width

  • line-break: KPIs will be broken across separate lines vertically to fit within the given component container size.

  • scroll: KPIs will be displayed

position

false

Defines the position of the KPI list

horizontal

false

Boolean

center

full

left

right

full

Defines the horizontal position of the component within its layout

Left aligned:

57541458.png

Center aligned:

57541457.png

Right aligned:

57541456.png

vertical

false

Boolean

top

bottom

center

bottom

Defines the vertical position of the component within its layout