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