Hi,
I've created two dashboards in Metabase: Dashboard A (parent) and Dashboard B (child). Dashboard A contains product listings and Dashboard B displays orders and additional analytics.
I need to implement navigation functionality that allows users to jump from Dashboard A to Dashboard B when my dashboards are embedded in my custom CRM using the React JS SDK. I've successfully implemented this navigation within the Metabase application itself, but I cannot provide Metabase login access to my customers and internal team.
Instead, I've embedded my dashboards into the customer CRM and now need to implement the ability for users to jump from Dashboard A to Dashboard B when they click on a specific card or link within a card.
Please help!
Here is a diagram to explain:
Regards, Waqas Shahid
Hello there!
The dashboard's custom click behavior has no effect when using the SDK. However, you can achieve this by customizing the drill-down menu, adding your own custom option, and handling the click event to show Dashboard B on the clicked row's Product ID (you could link to a URL, or change a prop).
To do this you specify a mapQuestionClickActions plugin on the InteractiveDashboard through its "plugin" prop. It would look like this:
function App() {
const createCustomAction = (clicked) => ({
buttonType: "horizontal",
name: "client-custom-action",
section: "custom",
type: "custom",
icon: "chevronright",
title: "Go to dashboard B",
onClick: ({ closePopover }) => {
console.log("Custom button clicked, do something to render Dashboard B", clicked);
},
});
const plugins = {
mapQuestionClickActions: (clickActions, clicked) => {
return [
createCustomAction(clicked)
];
},
};
return (
<div>
<MetabaseProvider authConfig={authConfig}>
<InteractiveDashboard dashboardId={1} plugins={plugins} />
</MetabaseProvider>
</div>
);
}
Then the drill-down menu shows the custom option
Let me know if that helps! Also, I see you already are a Metabase customer, so please contact us through our support email directly if you need any help
