Skip to content

Latest commit

 

History

History
72 lines (43 loc) · 3.06 KB

plugins.md

File metadata and controls

72 lines (43 loc) · 3.06 KB
title summary
Modular embedding SDK - plugins
Customize modular embedding SDK components with plugins. Control click actions, link handling, and no-data illustrations globally or per-component.

Modular embedding SDK - plugins

{% include plans-blockquote.html feature="Modular embedding SDK" sdk=true %}

The Metabase modular embedding SDK supports plugins to customize the behavior of components. These plugins can be used in a global context or on a per-component basis.

Plugin scope

Global plugins

To use a plugin globally, add the plugin to the MetabaseProvider's pluginsConfig prop:

{% include_file "{{ dirname }}/snippets/plugins/global-plugins.tsx" snippet="example" %}

Component plugins

To use a plugin on a per-component basis, pass the plugin as a prop to the component:

{% include_file "{{ dirname }}/snippets/plugins/component-plugins.tsx" snippet="example" %}

See docs for specific components:

Global plugins

mapQuestionClickActions

The plugin mapQuestionClickActions lets you to customize what happens when people click on a data point on a dashboard or chart. mapQuestionClickActions can be used globally, or on component level.

See mapQuestionClickActions plugin for more information and examples.

handleLink

To customize what happens when people click a link in your embedded questions and dashboards, use the global plugin handleLink:

{% include_file "{{ dirname }}/snippets/plugins/handlelink.tsx" snippet="example" %}

By default, links open in a new tab. Use handleLink to intercept link clicks — for example, to open a URL in a modal or navigate within your app using your router.

The function receives a URL string. Return { handled: true } to prevent default navigation, or { handled: false } to open the link in a new tab.

The plugin handleLink can only be used globally on provider level. handleLink is also available in modular embedding via pluginsConfig in defineMetabaseConfig, with the same API.

To create clickable links in your table columns, set the column's formatting to display as link.

getNoDataIllustration and getNoObjectIllustration

By default, Metabase displays a sailboat image when a query returns no results. To use a different image, you can use getNoDataIllustration and getNoObjectIllustration plugins which can accept a custom base64-encoded image:

{% include_file "{{ dirname }}/snippets/plugins/custom-images.tsx" snippet="example" %}

The plugins getNoDataIllustration and getNoObjectIllustration can only be used globally on provider level.

Further reading