# Celonis Product Documentation

#### Views Components

##### Introduction to Components

Components are pieces you can add to your View such as tables, charts, KPI lists, and many more. They specify the actual visual elements being displayed by the View and make your Business Knowledge Entities available and actionable to your business users.

Some components might seem familiar to you since they are available in Analysis, too. However, we also worked on a wide range of new components to use for your Execution Apps and Instruments.

##### Available Components

Activity History

Use the "Activity History" component on Profile Views to give your users a quick overview of all activities for a specific object. It can be used to display comments, case activities, or executed tasks.

###### Anomaly List

Use the "Anomaly List" component on Views to give your users a quick overview of all automatically detected anomalies in their system. It provides an overview of the defined KPIs, occurrences, and impact. Details of an Anomaly can be analyzed on Profile View.

###### Attribute

Use the "Attribute" component on Profile Views to give your users a quick overview of all-important attributes and KPIs for a specific object.

###### Button

Use the "Button" component on (Profile) Views to navigate your user to specific websites or trigger Skills.

###### Chart

Use the "Chart" component to display content in visual form. Charts can have different visuals - line, bar, point, text, lollipop. It's possible to have multiple visuals on the same chart.

Use the "Comments" component on (Profile) Views to allow your user to exchange information to process an object. Comments can be listed by using the "Activity History" component.

###### Dropdown

Use the "Dropdown" component on (Profile) Views to allow your users to filter the entire View based on attributes or changing input variables which can be used e.g. for changing dimensions for other components.

###### Embedded views

Use the "Embedded View" component on (Profile) Views to box Views inside Views. Optionally, parameters such as filters, selections or inputs can be passed. This makes embedded Views a powerful and versatile component. However, embedded Views are not immediately visible to your business users but oftentimes seamlessly fit in the parenting View.

###### Global Search

Use the "Global Search" component on (Profile) Views to allow your user to search by relevant attributes. The entire View will be filtered by the entered search term.

###### Image

Use the "Image" component on (Profile) Views to embed relevant images for your users. It can be used to display a company logo or any other image.

###### Input Box

Use the "Input Box" component to show a text entry field with a label that prompts the user to enter input. The input can be a string, number, time or date.

###### Input Checkbox

Use the "Input Checkbox" component to show a checkbox with a label, which when selected will be activated, or deactivated. It is a great way to allow for user interaction.

###### KPI List

Use the "KPI List" component on (Profile) Views to allow your users to see the current value of a KPI. Furthermore, it can be used to set KPI targets as well as visualize benchmark information.

###### KPI Bowler

Use the "KPI Bowler" component on (Profile) Views to allow your users to define and track the progress of their KPIs over time.

###### Line (Horizontal Rule)

Use the "Line" component on (Profile) Views to clearly separate content into different sections for your users to make the Views better understandable.

###### Network Explorer

Use the "Network Explorer" component to visualize a custom Graph from a variety of data structures.

###### Process Explorer

Use the "Process Explorer" component to show the most frequent activities and connections. Any number of Event Logs can be visualized. There are multiple types of transitions between Event Logs that can be defined.

###### Recommendation

Use the "Recommendation" component on Views to list out different recommendations on how to improve a KPI. Details about the recommended improvement measures can be provided in Profile Views.

###### Quick Filter

Use the "Quick Filter" component on Views to allow users to quickly filter on relevant attributes with as few clicks as possible.

###### Sankey Diagram

Use the "Sankey Diagram" component to show weighted networks, i.e. flows. They can be used to visualize Source to End connections: For a total amount, the diagram can show where it comes from and where it ends up, with possible intermediate steps. Or they can be used to visualize evolution: Nodes are duplicated in two or more groups that represent stages. Connections show the evolution between two states, similar to Chord diagrams.

###### Table

Use the "Table" component on (Profile) Views to give your users a quick overview about all relevant attributes. It supports a vast variety of configuration options.

For more details, see Table.

Use the "Task List" component on Profile Views to list all Tasks existing on a specific object, give details about them and display the options for a Task Action. It is typically used in Profile Views.

###### Text

Use the "Text" component on (Profile) Views to provide your users relevant information in text form. The component allows text and HTML.

###### Time Filter

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

###### Treemap

Use the "Treemap" component on Views to display hierarchical data using nested rectangles. Size and color of the rectangles can indicate up to two KPIs.

###### Waterfall Chart

Use the "Waterfall Chart" component to display the cumulative effect of values.

###### World Map

Use the "World Map" component to display distributions of a dimension across different countries worldwide.

##### Cross-Component Settings
###### Display Rules

Display Rules is a shared component that can be used inside View components to create visual styling for the content. Display Rules are defined in the Knowledge Model as a Custom Object and can be called by components of a View.

Components that can apply Display Rules are

• KPI List

• KPI Bowler

• Table

• Attribute

More about Display Rules ...

First, define a Custom Object in the Knowledge Model for your Display Rule.

- 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

The Custom Object contains Custom Attributes.

Then you can use the Display Rule on a component by adding it to the 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 have a broad range of options to add specific style elements to your View.

• Icon from the emotion library or from image url (supporting icon alignment, size, with or without text)

• Avatar from url or generated from the User Name (supporting alignment, size, color for generated from User Name avatars, with our without text)

• Label (supporting text and background styling, with/without icon)

• Showing the value with css text styling, background.

• the color support any CSS color or HEX code, see examples here

The key:value pairs of style accept the following types of values

• iconName: string;

• iconSize: number;

• iconFont: boolean;

• avatar: boolean;

• avatarUrl: string;

• avatarColor: string;

• avatarSize: AvatarSize;

• iconPosition: IconPosition;

• label: boolean;

• backgroundColor: string;

• textColor: string; (CSS colors (e.g. "#000000"))

• border: string;

• fontSize: string;

• fontItalic: boolean;

• fontWeight: string;

Supported comparators

You can use the following comparators for defining a display rule in the 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'

Icon Library

You can use the following icons in your display rules by adding iconName: [name of the icon from the list below].

###### Icons

Some components such as tables and buttons can incorporate icons. You can also use icons in your display rules by adding iconName: [name of the icon from the list below].

###### Adding an Info Text to Components

Info Text is used to add an info icon next to the title of another component. On hover, an info box with title and description appears next to the component header. It is a handy general components setting that can be added to other components.

This is how the info icon looks like next to an icon:

This happens on hover:

###### Formats and Units

For many components, formats and units can be specified within the View component configuration. This allows for flexibility in displaying content to your business users.

The format strings used in the Studio are based on d3 formatting.

Example number formats

For an executive view, you might want to give a broad overview of relevant KPIs. Rounding and abbreviating large numbers will help the executive user to quickly grasp the status of a KPI. In contrast, an operational user working with Action Views needs to be aware of the details and the displayed KPI's should be as accurate as possible.

format

what it does

before

after

"f"

"f" stands for fixed-point decimal notation, with a default precision of 6 decimals

4223.12345

4223.123450

".2f"

the ".2" tells the formatter to round to two fixed decimal points

4223.1299

4223.13

",.2f"

the "," option groups thousands using a comma

4223.1299

4,223.13

"$,.2f" the "$" option adds a localized currency symbol to the number

4223.1299

\$4,223.13

"r"

"r" stands for rounded decimal notation, rounded to significant digits

4223.123

4223.12

",r"

the "," option groups thousands using a comma

4223.123

4,223.12

",.2r"

the ".2" tells the formatter to round to 2 significant digits

4223.123

4,200

"s"

"s" stands for decimal notation with an SI prefix, rounded to significant digits, by default 6 significant digits

3500

3.50000k

".3s"

".3s" will round to 3 significant digits; ".4s" → 4 significant digits, etc.

3500

3.50k

".3~s"

the "~" sign will trim any trailing insignificant zeros; note you can also use the "~" with all other format types (eg. "~s", "~r", ...) which will always trim insignificant trailing zeros

3500

3.5k

Example date and time formats

Different components might require different abstraction levels when it comes to date and time formats. To get a visual overview, e.g. in a chart, you might want to use a broader scale (such as month and year). When displaying comments, your business users might benefit from the exact time a comment was created (such as date and time).

format

what it does

example result

range

%y

year without century as a decimal number

20

[00,99]

%Y

year with century as a decimal number

2020

%m

month as a decimal number

02

[01,12]

%_m

month as a decimal number without leading zeros

2

[1,12]

%d

zero-padded day of the month as a decimal number

08

[01,31]

%e

space-padded day of the month as a decimal number

8

[1,31]

%H

hour (24-hour clock) as a decimal number

23

[00,23]

%h

hour (12-hour clock) as a decimal number

11

[01,12]

%q

Quarter number

4

[1,4]

%p

either AM or PM

8pm

%M

minute as a decimal number

23

[00,59]

%a

abbreviated weekday name

Fri

%A

full weekday name

Monday

%b

abbreviated month name

Feb

%B

full month name

July

Some examples to encode the following date and time "2018-04-15 15:22:01"

format

result

"%m/%y"

04/18

"%B %e, %Y"

April 15, 2018

"%H:%M"

15:22

"Q%q"

Q2

Use Cases

Add these general component settings to components to provide your business users with more information. Examples could include

• describe what can be seen on a chart

• use the info text to inform about used filters

• explain the action of a button

The content part can include HTML to use for example formatting but also include pictures (if they are hosted freely accessible on a website). If you are new to HTML, we recommend the following external resource.

As you can see below, the info text is added directly within the definition of another component. Info text can be applied to all components with a "name" key.

components:
- id: "kpiList"
type: "kpi-list"
settings:
name: My KPI List
infoText: # add this line below the name attribute of a component
title: "Please note!" # enter the title of your info text here
content: "Please note that filters are used to calculate the KPI" # enter the content of your info text here - HTML is possible but will be sanitised for security
data:
type: "tile"
kpis:
- kpi: "KPI1"
- kpi: "KPI2"