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.

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

Benchmarking

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:

layout:
  rows:
  - id: row1
    columns:
    - id: row1-col1
      componentId: someGeneralFilter
      size: 1
      order: 100
    order: 100
  - id: row2
    columns:
    - 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.

    components:
- id: embeddedView
  type: view
  settings:
    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

Settings

Key

Options

Description (if true ...)

allowHeader

true/false

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

allowFilters

true/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.

shareAll

true/false

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

shareFilters

true/false

All filters are shared across Views.

shareSelections

true/false

All selections are shared across Views.

shareInputs

true/false

Inputs can be used across Views.