Skip to main content

Celonis Product Documentation

Button
Overview

Placement

View

or

Profile View

Required KM objects

None

Introduction to Buttons

Use the "Button" component on (Profile) Views to navigate your user to specific websites or trigger Skills. Studio offers a wide range of configuration options for buttons. You can decide on the label and styling of a button and add an icon to indicate on underlying actions of a button.

 

image.png
Basic Button configuration
Basic Button configuration

To configure a basic Button List component, you must have at least the following features defined.

Attribute

Required

Type

Description

label

false

String

Defines the description text that will be shown on the button. Try to keep the button's label short and precise. It is also possible to create a button without a label by only using an icon instead of a label.

Click here to see screenshot

In the example below, the buttons are defined with the labels "Open Invoice", "Past Due", and "High Priority"

image.png

id

false

String

Defines a unique identifier for the field. It is important in context of Base and Extension.

order

false

Integer

Defines the order of the table column. It is important in context of Base and Extension.

 

id: button-list-0ea9c7b7-d486-4b70-95dc-644900c6879e
type: button-list
settings:
  buttons:
    - label: Button 1
      order: 100
      id: b1
      onClick:
        navigateTo: 
          url: www.celonis.com
          openInNewTab: true
    - label: Button 2
      order: 200
      id: b2
    - label: Button 3
      order: 300
      id: b3
Advanced Configuration

The following configuration options are available to further customize your button list component.

"Buttons" configuration options
"Buttons" configuration options

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

Attribute

Required

Type

Possible values

Default Value

Description

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. 
image.png


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.

image.png
image.png

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.

 

image.png
id: buttons-list
type: button-list
settings:
  name: Button List Example
  buttons:
    - label: Neutral
      variant: neutral
      icon: roadmap
    - label: Primary
      variant: primary
      icon: training
    - label: Info
      variant: info
      icon: info
    - label: Danger
      variant: danger
      icon: delete
    - label: Link
      variant: link
      icon: link
  size: small  

"OnClick" configuration options
"OnClick" configuration options

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

Attribute

Required

Type

Possible values

Default Value

Description

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, 

  1. If the view contains contains tabs, the tab that is selected when the URL is copied will be the one opened by default for the user. 

  2. Even if this view is extended (meaning the URL will change), this link will continue to work. Celonis View URLs contain a unique View ID which changes whenever it is extended (e.g. from the App Store). However, we will automatically detect the View Key (which does not change when extended) information from this URL and link with this as opposed to the View ID information. Please Note: This will only work when the visual editor is used. If the URL is pasted directly into the YAML, it will link with the standard URL and the link will break if you extend the view. 

  3. We will also be able to detect if the URL is on the same view you are linking from (e.g. using a button to switch tabs). When this happens a router link will be used so the page is not reloaded. 

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

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

57543063.png

variables

- name: value1

- value: ${value1}

false

-

-

 

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

  • name: Defines the variable name

  • value: Defines the variables value

 

id: buttons-list
type: button-list
settings:
  buttons:
    - label: href
      onClick:
        navigateTo: 
          url: https://www.celonis.com/{0}/{1}
          openInNewTab: true
          placeholders:
            - field: RECORD.ATTRIBUTE0
            - field: RECORD.ATTRIBUTE1
      order: 100
    - label: openView
      onClick:
        openView:
          carryFilters: true
          carrySelections: true
          viewKey: profile-view
          openInSideOverlay: true
          variables:
            - name: variable_name
              value: variable_value
      order: 200
    - label: executeSkill
      onClick:
        executeSkill:
          skillKey: email
          inputs:
            - name: input_name
              value: input_value
      order: 300
    - label: update
      onClick:
        update:
          variables:
            - name: variable_name
              value: variable_value
      order: 400

"Other" configuration options
"Other" configuration options

The others section's general settings apply to the entire button list component. Please find below an overview of the different configuration options:

Attribute

Required

Type

Possible values

Default Value

Description

size

false

Enum

small

large

large

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

image.png

orientation

false

Enum

vertical

horizontal

false

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

Vertical:

image.png

Horizontal:

image.png

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: 

image.png

Default Buttons: 

image.png

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.

55707638.png

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.

55707636.png

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.

55707639.png

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.

image.png

vertical

false

Enum

top

center

bottom

bottom

Defines the vertical alignment position with the given layout.

 

Top Alignment

59048081.png

Bottom Alignment

59048082.png

Middle Alignment

59048084.png

 

id: buttons-list
type: button-list
settings:
  type: default
  orientation: vertical
  size: small
  styles:
    overflow: full-width
    position:
      horizontal: full
      vertical: bottom
  buttons:
    - label: Button 1
    - label: Button 2