Embed Functions

To integrate and make use of specific embed functions within the dbn-dashboard component, you first need to locate the component with dbn-dashboard className on the webpage.

const dbnDashboard = document.querySelector(
  'dbn-dashboard'
)?.shadowRoot?.querySelector('.dbn-dashboard') as HTMLElement & {
  onClickCreateMetric?: () => void;
  onClickManageMetrics?: () => void;
  onClickScheduleReports?: () => void;
  onClickCustomizeLayout?: () => void;
};

Now you can add the buttons on your screen with these specific functions in the onClick event of those buttons, here’s an example:

<button type="button" onClick={() => dbnDashboard?.onClickCreateMetric?.()}>
  Create Metric
</button>

Embed Functions Overview

There are four functions provided by the embed:

onClickCreateMetric(): It will open the create metric modal.

onClickManageMetrics(): It will open the manage metrics modal.

onClickScheduleReports(): It will open the schedule reports modal.

onClickCustomizeLayout(): It will enable the customize layout mode.

⚠️ Note: The functions will work only if you haven’t disabled the respective operations. Also, you need to disable showDashboardActions in options in dbn-dashboard component, if you don’t want to see the buttons provided by it that perform these actions and want to customize the buttons yourself.

Embedding Setup

MCP Server

Framework Integration

Component Options

Authentication & Security

Filtering & Personalization

Customization

Events & Interactions

End-User Features

AI Chat Mode

Self-Hosted Deployment

Solution Patterns

Testing & Debugging

Migration & Legacy

Additional Resources

Embed Functions Overview

​Embed Functions Overview

Embed Functions Overview