This provides step-by-step instructions to add a Dashboard button to the side navigation in a Configurable Workspace using the UI Builder.
Prerequisites
Ensure the following before proceeding:
- You have an existing workspace built with UI Builder and the Workspace App Shell.
- The workspace has at least two pages, including the dashboard you want to add.
- You have the ui_builder_admin role.
Steps to Add a Dashboard to the Side Navigation
- Open Your Workspace in UI Builder:
- Navigate to All > Now Experience Framework > UI Builder.
- Open the workspace you want to configure in the UI Builder.
- Access Experience Settings:
- In the upper-right corner, click View experience settings.
- Navigate to Advanced Settings:
- Click Advanced Settings in the General section.
- This opens the UX Application Record in a new window.
- Find Chrome Toolbar Configuration:
- Scroll down to the UX Page Properties related list and locate the chrome_toolbar property.
- Open the chrome_toolbar page property.
- Add the Dashboard Button JSON Code:
- In the Value field, find the existing JSON configuration.
- Add the following JSON object to the array (make sure to include a comma if appending to existing entries):
{
"id": "dashboard",
"label": {
"translatable": true,
"message": "Dashboard"
},
"icon": "activity-outline",
"viewportInfo": {},
"routeInfo": {
"route": "dashboards"
},
"group": "top",
"order": 500,
"badge": {},
"presence": {},
"availability": {
"roles": [
"sn_customerservice_agent"
]
}
}
- Save and Refresh:
- Save the UX Page Property (chrome_toolbar) record.
- Refresh the instance or clear the cache using cache.do.
- Verify the Changes:
- Navigate to Workspaces > CSM/FSM Configurable Workspace.
- You should see the Dashboard button in the side navigation of the chrome toolbar.
- Clicking the Dashboard button should open the desired dashboard. Users will see available dashboards based on their access permissions.
