Dashboard URL parameter delegation
The Delegate URL params property enables UIB pages containing dashboard components to control how URL parameter updates are handled. Doing so enables custom navigation logic for embedded or workspace scenarios.
By default, dashboard components automatically update the browser URL when users switch dashboards, change tabs, or toggle edit mode. This behavior works well for standard dashboard pages but may not suit all implementation scenarios.
The Delegate URL params property provides an alternative approach where the dashboard component dispatches events instead of directly updating URLs. This delegation mechanism allows parent pages to implement custom navigation logic.
For information about this property in the context of the Dashboard component configuration panel, see Dashboard component properties.
When to use URL parameter delegation
URL parameter delegation is useful in these scenarios:
- The page URL structure does not include dashboard URL parameters — for example, no
sys-idin the URL path - The page requires custom navigation logic for dashboard changes
- The dashboard is embedded in a workspace where URL management is handled by the parent component
- Multiple dashboard components exist on the same page and need coordinated URL handling
How delegation works
When Delegate URL params is disabled (default behavior):
- User performs an action, such as switching the dashboard, changing the tab, or toggling edit mode
- Dashboard component dispatches an internal
CONTENT_UPDATEDaction - UIB framework processes the action and updates URL parameters automatically
When Delegate URL params is enabled:
- User performs an action
- Dashboard component suppresses the
CONTENT_UPDATEDdispatch - Dashboard component dispatches
DASHBOARD#URL_PARAMS_UPDATE_REQUESTEDwith structured parameter data - Client script on the page receives the event and implements custom navigation logic
Event payload structure
The DASHBOARD#URL_PARAMS_UPDATE_REQUESTED event contains a urlParams object with structured parameter information. Each parameter includes the value, description, and additional metadata such as dashboard names and new tab indicators.
This structured approach provides client scripts with sufficient context to make informed navigation decisions, including handling special cases like opening dashboards in new browser tabs.
For more information about this event, see Dashboard component events.
Configure dashboard URL parameter delegation
Enable URL parameter delegation for dashboard components to implement custom navigation logic in UIB pages.
Before you begin
Role required: ui_builder_admin
About this task
Configure URL parameter delegation when you need custom control over how dashboard navigation updates browser URLs. This is useful for embedded dashboards, workspace scenarios, or pages with non-standard URL structures.
Procedure
Result
When users interact with the dashboard (switch dashboards, change tabs, toggle edit mode), the component dispatches events that your client script can handle with custom navigation logic.
Basic delegation client script
This example script replicates the default URL update behavior:
function handler({api, event}) {
const {urlParams} = event.payload;
for (const [key, paramInfo] of Object.entries(urlParams)) {
if (key === 'sysId' && paramInfo.isNewTab === true) {
// Handle new tab navigation
api.emit('NAV_ITEM_SELECTED', {
route: 'dashboards',
title: paramInfo.dashboardName || paramInfo.value,
params: {sysId: paramInfo.value},
navigationOptions: {
navigateExternal: true,
target: '_blank'
}
});
return;
}
// Handle normal navigation
api.emit('CONTENT_UPDATED', {
route: 'dashboards',
params: {[key]: paramInfo.value}
});
}
}