Skip to main content

Celonis Product Documentation

Opening a linked View in an existing View

Note

Linking Views & Legacy Views from the same package is not supported.

You can configure a linked View to open as an overlay within another View, triggered by a user clicking data in a table or a button. This overlaid View can then be displayed as a modal overlay or a side-panel.

To overlay a View, both the linked View (the one you want to overlay) and the View you're editing must be in the same package. Once published, any user who has access to the View you're editing will then be granted access to View the overlaid information.

If you want values in your linked View to be replaced with values from your current View, the linked View needs to have View variables defined. For more information, see: Enhanced variables.

Opening a linked View using a table component

When using a table component, you can select the column where the overlay can be accessed from.

In this example, the 'User Name' column has been configured so that when a user clicks on data in that column, an overlay appears (using a View from the same package):

example_of_table_embed_view_1.png
  1. Either drag and drop a table component into your View layout or select an existing table and open the settings panel.

  2. For the column you want to enable the overlay for, click the Settings icon:

    table_overlay_step_1.png
  3. Expand Interactions, enable Open view in overlay, and select the View you want to link to.

    interactions_overlay.png
  4. Configure Open View in overlay settings:

    • Linked View: Select the View you want to display in the overlay.

    • Reuse data from main view: Select which data from the main view you want to see in the linked view. This can include tables and view variables.

      If variables, select the variables from the current View that you want to replace values in the linked View with. It is optional to create this mapping, however. Without mapping your variables, the View variables of the target View will display their respective current values.

    • Sync view filters: Enable the syncing of filters between the two Views. You can choose between forwards, backwards, and both here.

      • Forward: Filters set on the main View and filters set on the component that is opening the linked View, will be immediately applied to the linked View.

      • Backward: Filters set on the linked View will be immediately applied 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.

    • Open from this view as: Select either a modal or side panel overlay.

  5. Optional: If you intend your linked View to be scoped to a single item that you’ve stored to a variable, you will also need to create a Custom PQL filter in the linked View. That filter should set a column from a table to the mapped variable.

    The PQL would be:

    FILTER “Table”.”Column” = ‘${Variable}’
  6. Click Preview and test that your overlay works as expected.

    preview_view.png

When using a button component, you can configure an overlay to appear when an app viewer clicks the button. In this example, a simple button has been added to 'Show Related View' (with the overlay appearing at the side):

Button_overlay.png
  1. Drag and drop a button component into your View layout or select an existing button and open the settings panel.

  2. Enable Interactions - Open View in overlay.

    button_overlay_step_2.png
  3. Configure your button interaction behaviour:

    • Linked View: Select the View you want to display in the overlay.

    • Reuse data from main view: Select which data from the main view you want to see in the linked view. This can include tables and view variables.

      If variables, select the variables from the current View that you want to replace values in the linked View with. It is optional to create this mapping, however. Without mapping your variables, the View variables of the target View will display their respective current values.

    • Sync view filters: Enable the syncing of filters between the two Views. You can choose between forwards, backwards, and both here.

      • Forward: Filters set on the main View and filters set on the component that is opening the linked View, will be immediately applied to the linked View.

      • Backward: Filters set on the linked View will be immediately applied 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.

    • Open from this view as: Select either a modal or side panel overlay.

  4. Click Preview and test that your overlay works as expected.

    preview_view.png