Dashboards Programmability
The following feature is available as public beta in Flex UI version 1.27 and later. To use this feature, please make sure Insights - Programmable Dashboards public beta feature is enabled in your admin interface.
A developer proxy is needed for local development. Please refer to the article about Local Development.
Starting version 1.27, Flex allows users to programmatically configure the Dashboards navigation. Currently setting a filter for the Dashboards is supported.
Please note that this feature is for convenience use only and cannot be considered a security feature. Even with filtering enabled, agents are technically still able to access the whole list of the dashboards they have permissions to view.
Terminology
To explain how the filtering works, its important to establish some terms and explain how the navigation works.
We currently support 2 diffent kinds of dashboards:
- The Project Dashboards, which group sets of Tabs, which you can select to display a dashboard,
- and Analytical Dashboards, which by themselves are the dashboards.
Sidebar navigation
The Sidebar is used to list all of the dashboards and tabs in a way which is easy to navigate. On top, there is a dropdown, which allows you to select between All Dashboards, My Dashboards and also allows you to select a specific Project Dashboard.
When All Dashboards is selected, the list will display all of the Analytical Dashboards first and then every Project Dashboard along with its tabs.
When a specific Project Dashboard is selected, the list will only display its underlying tabs.
DashboardsSidebar component
This component has 2 default props that can be overriden:
dashboardsFilter: (dashboard) => boolean
dashboardTabFilter: (tab, dashboard) => boolean
These props are available under the following namespace: Flex.Insights.DashboardsSidebar.defaultProps
.
dashboardsFilter
The dashboardsFilter
determines which dashboards will be available in the dropdown at the top of the sidebar and as part of the navigation. The return value from the function dictates if the particular Dashboard will be displayed or hidden.
The function takes dashboard
as an argument. This can be either an Analytical Dashboard or a Project Dashboard.
If false
is returned for a Project Dashboard, it will disappear from both the dropdown and from the navigation – if "All Dashboards" is selected, along with all of its tabs. If you want to hide only some of the tabs, use the dashboardTabFilter
prop.
If false
is returned for an Analytical Dashboard, it will be hidden from the top of the navigation, when "All Dashboards" is selected.
The dashboard
argument has the following shape:
identifier: string;
category?: string;
link?: string;
title?: string;
author?: string;
tabs?: Array<{
title: string;
identifier: string;
}>;
widgets?: string[];
Example
In this example, let's say you want to hide a dashboard named "Control Center":
Flex.Insights.DashboardsSidebar.defaultProps.dashboardsFilter =
(dashboard) =>
dashboard.title !== "Control Center"
dashboardTabFilter
Sometimes you might not want to hide the whole Project Dashboard, but only some of its tabs. Thats when this function comes in handy.
The function takes tab
and a dashboard
as its arguments. Each Project Dashboard tab is checked againts this filter and the return value for that tab determines if the tab should be displayed or not. The dashboard
argument is the Project Dashboard which the tab is part of. This allows you to decide not only based on the tab title itself, but also by the properties of the dashboard, as displayed in the example below.
The tab
argument has the following shape:
title: string;
identifier: string;
Example
Let's say you want to hide a tab named Conversations which is part of the Control Center dashboard:
Flex.Insights.DashboardsSidebar.defaultProps.dashboardTabFilter =
(tab, dashboard) =>
tab.title !== "Conversations" && dashboard.title !== "Control Center"
It might, however, be a better idea to filter directly by ID. To find out ID for any dashboard, you can follow this guide. Please note that the ID in the URL corresponds with the tab.identifier
key.
Please note that setting a dashboardTabFilter
has no effect on Analytical Dashboards.
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.