Skip to main content

Celonis Product Documentation

Embedded Views
Introduction to Embedded Views

This component allows boxing 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 oftentimes not immediately visible to your business users but fit seamlessly in the parenting View.

Use cases for Embedded Views
Conditional Layout

Based on a selected KPI, different content is displayed below. For example for some KPIs I want to display a chart, for others, I want to display a table. You can realize this by

  • Defining an input.

  • Updating this input through onClick interaction with a KPI List in tile format.

  • Using this input to open a certain embedded View.


Include two (or more) other Views inside a View to benchmark and define how to filter. An example layout configuration for a benchmarking use case could be:

  - id: row1
    - id: row1-col1
      componentId: someGeneralFilter
      size: 1
      order: 100
    order: 100
  - id: row2
    - id: row2-col1
      componentId: embeddedView1
      size: 1/2
      order: 100
    - id: row2-col2
      componentId: embeddedView2
      size: 1/2
      order: 200
Sticky Header

There is no functionality yet to freeze a row (“sticky header"). A sticky row would remain visible and in the same position as the user scrolls down and moves about a site. However, this can be achieved through embedded Views where the content that should be frozen is in the main View and the content that is scrollable is configured in the Embedded View with a fixed row height.

Configuring Embedded Views
  1. Create a view to be embedded. As always, you can choose to create from scratch, based on a template, or as an extension of another view. You will need the key to this View shortly.

    key: "my-embedded-view"

    Note about keys

    If you have a key to an asset within the same package, you don't need the package key in front of the asset key. (package-key. asset-key will be displayed if you get the key from the three-dot menu of the asset, you will only need the part after the dot).

  2. Go to the View you want to contain another view and add the component view.

    - id: embeddedView
      type: view
        key: "my-embedded-view" #Allows JavaScript to embed Views based on conditions E.g. key: ${ (record.alert_type === "SUPER-URGET" && "VIEW-KEY-SUPER-URGENT")}
        allowHeader: true
        allowFilters: true
        shareAll: false
        shareFilters: true
        shareSelections: true
        shareInputs: false




Description (if true ...)



The title of the embedded View is visible. In case you want to blend the views, it is recommended to set allowHeader to false.



The filter bar is shown in the header of the embedded view. That can be helpful in use cases when you don't share filters with another view, you would like to see the filter bar.



Default if not set explicitly: All filters, selections and inputs are shared across Views.



All filters are shared across Views.



All selections are shared across Views.



Inputs can be used across Views.