Dashboard custom element

You can embed a view-only GoodData dashboard into your application using the gd-dashboard custom element with the following:

<!-- minimal setup -->
<gd-dashboard dashboard="my-dashboard-id"></gd-dashboard>

Supported attributes

<!-- all supported attributes -->
<gd-dashboard
    dashboard="my-dashboard-id"
    workspace="my-workspace-id"
    locale="en_US"
    readonly
></gd-dashboard>

• dashboard - Mandatory, the ID of the dashboard to embed.
• workspace - optional, the ID of the workspace for this dashboard. By default, it is taken from the context (e.g., from the script URL).
• locale - optional, defaults to en-US. The localization of the visualization. For all available languages, see the full list of available localizations.
• readonly - optional. If enabled, the dashboard will be embedded in the read-only mode and all user interaction that would alter any backend state will be disabled (e.g., creating/changing alerts, creating scheduled emails, and so on).

You can also provide a workspace id on the context level instead of passing it as an attribute to every dashboard. See the code example of the Web Components authentication article.

The locale property affects only the UI elements and not your data or the metadata language.

Supported events

gd-dashboard emits the same events as the Dashboard component.

Events do not bubble and are not cancelable. Here is how you can subscribe to one from your code:

<gd-dashboard dashboard="my-dashboard-id" id="some-dom-id"></gd-dashboard>
<script>
    const dashboardEl = document.getElementById("some-dom-id");
    dashboardEl.addEventListener("GDC.DASH/EVT.INITIALIZED", (event) => {
        // See what's in the event payload
        console.log(event.detail);
    });
</script>