Opening a linked view in an existing view
Note
You're currently viewing a topic describing a Studio feature that's in limited availability. For more information, see: Studio (new experience).
For all other Studio features, see: Studio.
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 target 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 target view to be replaced with values from your current view, the target view needs to have view variables defined. For more information, see: View variables.
Overlay 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 'SALES' 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):
 |
Either drag and drop a table component into your view layout or select an existing table and open the settings panel.
For the column you want to enable the overlay for, click the Settings icon:
Enable Selection behavior - Open View in overlay.
Configure Open View in overlay settings:
Target view: Select the view you want to display in the overlay.
Variable mapping (optional): Select the variables from the current view that you want to replace values in the target 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.
Display mode: Select either a modal or side panel overlay.
Sync 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.
In this example, when clicking data in the SALES column the app will display the 'Sales Order' target view as a side panel. There is also an active mapping for the view variable "SalesOrder" from the target view. This variable will get updated with the "Order_ID" of the row in which the click in the table is done.
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 target view. That filter should set a column from a table to the mapped variable.
The PQL would be:
FILTER “Table”.”Column” = ‘${Variable}’Click Preview and test that your overlay works as expected.
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):
 |
Drag and drop a button component into your view layout or select an existing button and open the settings panel.
Enable Interactions - Open view in overlay.
Configure your button interaction behaviour:
Target view: Select the view you want to display in the overlay.
Variable mapping (optional): Select the variables from the current view that you want to replace values in the target 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.
Display mode: Select either a modal or side panel overlay
Sync 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.
In this example, when the button is clicked the app viewer is shown the target view 'Sales Orders' as a side panel overlay and any available filters are synced forwards. There are no variables mapped, however.
Click Preview and test that your overlay works as expected.