Celonis Product Documentation

buttons

true

List of buttons

-

-

Requires a list of buttons the user would like to include. Each button should have at least the label or icon defined to correctly show in view. Details on these and the other object configurations can be found below.

label

false

String

-

-

Defines the description text that will be shown on the button. Try to keep the button's label short and precise. In the example below, the buttons are defined with the labels "Open Invoice", "Past Due", and "High Priority"

Figure 1. 

icon

false

String

Find a full list of available icons on this page in the section Display Rules.

-

Defines the icon that will show on the button. This visual element can help users to understand the underlying action of the button.

size

false

Enum

small

large

large

Defines what size you would like your buttons to show in the view.

variant

false

Enum

neutral

primary

info

danger

neutral

Defines the button's visual appearance. It is recommended to use a fitting variant to the use case, e.g. buttons that lead to deletions should be of variant danger to make sure that your business users receive visual cues on the underlying action.

onClick

false

Defines the underlying action of a button

onClick: 

navigateTo: 

url: 

false

String

-

-

Defines if a link should be added to the button. Can be another Celonis View or any external URL. 

id: button-external-link
type: button-list
settings:
  buttons:
    - label: Celonis Website
      id: f825e378-e2bd-43eb-8c10-e6857fa33d34
      order: 100
      onClick:
        navigateTo:
          url: https://www.celonis.com/
          openInNewTab: true

When Linking to another Celonis view, you can simply copy and paste the View URL. Additionally, 

openInNewTab

false

Boolean

true

false

false

Defines if the linked URL should be opened in a new tab or not. 

placeholders

false

List of fields

-

Defines the required placeholders in the external URL link

Click here to see screenshot

id: button-external-link
type: button-list
settings:
  name: Celonis Website
  buttons:
    - label: Celonis Website
      onClick:
        navigateTo: 
          url: https://www.celonis.com/de/{0}/{1} 
          openInNewTab: true
          placeholders: #Defines the required placeholders
            - field: NUMBER_OF_SOLD_PRODUCTS_EX
            - field: INVOICE.PRODUCT_NAME

update

variable:

- name: variable1

- name: variable2

false

Views variablesPackage runtime variables

-

-

You can use a button to update a variable when clicking the button. For information about variables, click here.

executeSkill

skillKey: button

variables:

- name: value1

- value: ${value1}

Defines if clicking the button should trigger a defined skill. Please also consult the Help Page on Provide default actions to learn more about manual Skill executions.

Click here to see screenshot

id: button-skill
type: button-list
settings:
  name: Trigger Skill
  buttons:
    - icon: product-workflows
      label: Trigger
      onClick:
        executeSkill:
          skillKey: button-test
          inputs:
            - name: value1
              value: ${value1}

routerLink

false

String

-

-

Defines if clicking the button should open another asset using a router link. router links allow you to navigate to different views without reloading the current view.

Click here to see screenshot

To open a router link, copy the portion of the asset's URL display after "package-manager/" and paste into the routerLink configuration. To define if you want the user to be directed to the view in the Studio or Apps, you can edit the first part of the link shown below:

Studio Link: /ui/studio/ui/...

Views Link: /ui/views/ui/..

id: button-router-link
type: button-list
settings:
  name: Navigate through router link
  buttons:
    - icon: kpi
      label: Check KPI Bowler
      onClick:
        routerLink: /ui/studio/ui/package/6f104d9f-3661-4962-bbc7-26b1abf60d0f/workbench-assets/ce4e3a7d-2373-409d-bf03-9d40fcf92c83

openView

false

-

Defines the view that will open onClick. You can link a Profile View (using the knowledgeObjectID) or any other view (using the viewKey)

KnowledgeObjectID

false

Knowledge Model - Record Attributes

Defines the Profile View the user wants to link to the button using the Knowledge Object ID / Record ID for which the registered default profile view is then opened. Click here to learn how to create a Profile View. Click here to learn more about View Variables.

The record must have an identifier defined in the Knowledge Model to use properly.

Click here to see screenshot

id: button
type: button-list
settings:
  name: Open a Profile View (of type Activity)
  buttons:
    - icon: product-workflows
      label: Activity View
      onClick:
        openView:
          viewKey: VIEW_KEY #Reference the key of the Profile View 
          variables: #Below some optional settings to carry variables to the view key
                - name: Variable name
                  value: 20
          carryFilters: false
          carrySelections: false

viewKey

false

String

Defines the view the user wants to link to the button using the View's Key.

Click here to see screenshot

- id: "kpi-button-list"
  type: "button-list"
  settings:
    type: "default"
    buttons:
    - label: "Detailed Risk Overview"
      variant: "primary"
      size: "large"
      icon: "info"
      block: true
      onClick:
        openView:
          viewKey: "Risk-Overlay"
          openInSideOverlay: true
          carryFilters: true
          carrySelections: true

openInSideOverlay

false

Boolean

true

false

syncFilters

false

String

forward-only (default)

backward-only

disable

both-ways

Defines if filters should be carried from the current view to the linked view. This will apply to all filters applied to the view (i.e. applied from dropdowns, quick-filters, table, charts, etc.)

forward-only: Filters set in the main view will be immediately applied to any linked view. 

backward-only: Filters set in the linked view will be immediately applied back to the main view. 

both-ways: Filters set on the linked view are immediately applied to the main view and filters set on the main view  are immediately applied on the linked view. 

disabled: no filters are carried to or from linked views. 

carrySelections

false

Boolean

true

false

Defines if table selections should be carried from the current view to the linked view. This should only be enabled if both your current and linked view contain table components.

Click here to see screenshot

variables

- name: value1

- value: ${value1}

false

-

-

Defines a list of variables from your base view that you like to utilize in your linked view.

size

false

Enum

small

large

large

Defines what size you would like your buttons to show in the view.

orientation

false

Enum

vertical

horizontal

false

Defines whether the list of buttons should be displayed in a vertical or horizontal format.

Vertical:

Horizontal:

type

false

Enum

group

default

default

Buttons can be of type group or default. Using type: group allows to place different buttons next to each other.

Grouped Buttons: 

Default Buttons: 

styles

false

Defines the different styles you can apply to the component.

overflow

false

Enum

full-width

line-break

scroll

full-width

Defines the overflow behavior that happens when the button list size is larger than the defined component size in the layout.

Full-width: Data will be condensed to fit component width.

Scroll: Scroll bar will be added so the buttons can retain the required width to easily read the label text while still fitting into the specified component box.

Line-break: Buttons will retain the required width to easily read the label text and any buttons that expand past the specified width will move to the next line.

position

false

Defines that the position of the component within the given layout.

horizontal

false

Enum

full

left

center

right

full

Defines the horizontal alignment position within the given layout.

vertical

false

Enum

top

center

bottom

bottom

Defines the vertical alignment position with the given layout.

Top Alignment

Bottom Alignment

Middle Alignment