3.11.3 Embedding in custom applications

This section describes how to display a dashboard in a custom application.

  1. Create a dashboard to be embedded.
    For details, see "Creating, editing, and deleting dashboards".
  2. Obtain the URL of the created dashboard.
    For details about how to obtain the URL, see "Obtaining the URL of a dashboard".
  3. Change the obtained dashboard URL.
    • Change the domain to "{{ .System.domain }}": This allows the same definition to be used in different environments.
    • Add kiosk=true to the query parameters: Enabling kiosk hides menus and other elements.
    Example URL:
    https://dash.{{ .System.domain }}/d/syrgrdq/new-dashboard?orgId=1&from=now-6h&to=now&timezone=browser&var-pageSize=100&kiosk=true
  4. Place the Iframe component in the UI YAML definition.
    • url label: Specify the URL of the dashboard.
    • allow label: Specify the following to enable clipboard operations from within the Iframe:
      clipboard-read https://dash.{{.System.domain}}; clipboard-write https://dash.{{.System.domain}}
    For details about the Iframe component, see "(Table) Iframe properties (UI version 1.1)".
TipsTips
Grafana's keyboard shortcut function is also available when a dashboard is embedded in a custom application using the Iframe component.
The Esc key is a shortcut for exiting kiosk mode. Exiting kiosk mode within the iframe displays menus and other elements.

[Obtaining the URL of a dashboard]

Open the dashboard and click the [Share] button displayed in the upper right of the screen to obtain the URL.
To obtain the URL after changing its settings, proceed as follows:

  1. Open the dropdown of the [Share] button.
  2. Select "Share internally" and configure the following settings:
    • Lock time range: Specify whether the data display period when the dashboard is opened uses relative time (relative to the current time) or absolute time (actual date and time).
    • Shorten link: OFF
      If set to ON, the URL is valid only in that environment and becomes invalid when migrating from the verification environment to the production environment. The URL also becomes invalid automatically after a certain period of time.
    • Theme: Normally, specify "Current". You can also specify "Dark" or "Light".
  3. Click the [Copy link] button.