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.

41190286.gif
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"

55707623.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.

onClick

href:

false

String

Defines if a link should be added to the button. Can be an external link or to another package. href is not a required input and can be replaced by other onClick actions.

Click here to see screenshot

1) Link using external URL

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

2) Link to other assets using the following link structure:

https://<your-team.realm.celonis.cloud>/package-manager/ui/by-keys?packageKey=<packagekey>&assetKey=<assetkey>&views=true

https://<your-team.realm.celonis.cloud>

Team URL

<packagekey> and <assetkey>

Replace with actual package and asset key

&views=true:

Optional field that will enforce opening the view in Apps.

Info

optimised for component editor

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

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

"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.

Note

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.

Click here to see screenshot

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

55707623.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.

Click here to see screenshot

41190215.png
41190216.png

size

false

Enum

small

large

large

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

Click here to see screenshot...

55707621.png

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.

Click here to see screenshot

41190213.png

Info

optimised for component editor

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
  orientation: small   

"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

href

false

String

-

-

Defines if a link should be added to the button. Can be an external link or to another package.

Click here to see screenshot

1) Link using external URL

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

2) Link to other assets using the following link structure:

https://<your-team.realm.celonis.cloud>/package-manager/ui/by-keys?packageKey=<packagekey>&assetKey=<assetkey>&views=true

https://<your-team.realm.celonis.cloud>

Team URL

<packagekey> and <assetkey>

Replace with actual package and asset key

&views=true:

Optional field that will enforce opening the view in Apps.

openInNewTab

false

Boolean

true

false

false

Defines if the URL should be opened in a new tab or not. This configuration only works if you also use hrefAttribute.

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:
        href: 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 variables Package 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.

Warning

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

carryFilters

false

Boolean

true

false

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.)

Click here to see screenshot

57543064.png

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

Info

optimised for component editor

id: buttons-list
type: button-list
settings:
  buttons:
    - label: href
      onClick:
        href: https://www.celonis.com/{0}/{1}
        openInNewTab: true
        placeholders:
          - field: RECORD.ATTRIBUTE0
          - field: RECORD.ATTRIBUTE1
      order: 100
    - label: routerLink
      onClick:
        routerLink: /ui/studio/ui/assets/b83202ad-143c-473c-90a3-5ac78584604c?overview-tab-13c7a454-1008-4f6d-b3aa-159fe2a79b11=tab-07e5c910-54a6-4f20-898f-84b0346f94e3
        openInNewTab: true
      order: 200
    - label: openView
      onClick:
        openView:
          carryFilters: true
          carrySelections: true
          viewKey: profile-view
          openInSideOverlay: true
          variables:
            - name: variable_name
              value: variable_value
      order: 300
    - label: executeSkill
      onClick:
        executeSkill:
          skillKey: email
          inputs:
            - name: input_name
              value: input_value
      order: 400
    - label: update
      onClick:
        update:
          variables:
            - name: variable_name
              value: variable_value
      order: 500

"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.

Click here to see screenshot...

55707621.png

orientation

false

Enum

vertical

horizontal

false

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

Click here to see screenshot

Vertical:

41190422.png

Horizontal:

59048080.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.

Click here to see screenshot

55707622.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.

Click here to see screenshot

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.

Click here to see screenshot

41190214.png

vertical

false

Enum

top

center

bottom

bottom

Defines the vertical alignment position with the given layout.

Click here to see screenshot

Top Alignment

59048081.png

Bottom Alignment

59048082.png

Middle Alignment

59048084.png

Info

optimised for component editor

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