---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-grafana
description: "This documentation explains how to integrate a Grafana widget into a UI page, configuring its URL and customization options"
---

# Grafana

:core-static-appgeneric-lg:{style="font-size: 100px"}

## Overview

The Grafana widget is used within Critical Manufacturing MES but your original Grafana dashboard is initially created in a separate external page.

!!! warning
    Given that Grafana is a server that can be deployed within the realm of the current customer environment (in a separate container sharing the same network and environment stack) or in an autonomous installation to be used by multiple environments, a configuration key is required to indicate the proper URL to be used for this specific environment. That key is `/Cmf/Guis/Configuration/Urls/Grafana/` and should hold the value for the current Grafana server location (example: `https://grafanaserver.companydomain.com:443/grafana`). If the configuration entry is not filled in, the widget will display an error:

![Screenshot showing a Grafana interface with missing URL.](images/grafana_missing_url.png)

## General

To use the Grafana widget in a UI Page, follow the steps below:

1. Drag and drop the Grafana widget into the desired place, expand it as needed, and then select **Open Grafana**:

    ![Screenshot showing the Grafana widget context menu with the Open Grafana option highlighted.](images/grafana1.png)

2. The Grafana entry page looks like this:

    ![Screenshot of the Grafana entry page, showing the Welcome to Grafana home screen and the Need help? section.](images/grafana2.png)

    !!! note
        This page is very important because in the Need help? section you can access [Documentation](https://grafana.com/docs/grafana/latest/?utm_source=grafana_gettingstarted) and other useful links to help you start creating your Grafana dashboard.

3. Create your dashboard in Grafana and copy its address.

4. In the created UI Page, select **Settings** either in the **More** dropdown or on the center page of the Grafana widget:

    ![Screenshot showing the Grafana widget context menu with the Settings option highlighted.](images/grafana1_settings.png)

5. In the **General** tab, provide a name (Grafana by default) and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

    ![Screenshot of the Grafana widget Settings dialog, General tab, showing the Name and Description fields and the Display and Options toggles.](images/grafana4.png)

## Style

{% include-markdown 'includes/pages/ui_widgets_style.md' %}

## Setup

Select the **Setup** tab and paste the complete address of your recently created Grafana dashboard into the **Dashboard Url** field.

If **Show Controls and Menu** is not enabled, the URL will contain `&kiosk`.

![Screenshot of the Grafana widget Settings dialog, Setup tab, showing the Dashboard Url field with the &kiosk parameter highlighted, along with the Theme and Show Controls and Menu options.](images/grafana3.png)

In the **Setup** tab, you can also select the Theme (Light, Dark, or Standard), and choose whether or not to Show the Controls or the Menu.

=== "Grafana with a light theme and the controls bar on the left"

    ![Screenshot showing the Grafana interface with customization options for Light, Dark, and Standard themes.](images/grafanalightcontrols.png)

=== "Grafana with a dark theme and no controls bar"

    ![Screenshot showing a customized Grafana dashboard in dark mode with controls hidden.](images/grafanadarknocontrols.png)

## Variables

In the **Variables** tab, you can :material-plus: or override the variables created in Grafana, along with their details:

![Screenshot of the Grafana widget Settings dialog, Variables tab, showing a list of variables (Plan, TimeUnit, TimeFrame) and the Variable Details panel.](images/grafana4_1plan.png)

!!! note
    The Variables you define in the settings are the default ones, but you can introduce other settings from the UI Page into Grafana.

## Inputs

In the **Inputs** tab, you can :material-plus: inputs as needed. Note that the **Name** and **Type** are mandatory fields:

![Screenshot of the Grafana widget Settings dialog, Inputs tab, showing an Area input configured with its Name, Type, and Reference Type.](images/grafana4_2.png)

## Links

In the **Links** tab, you can add links to make your UI Page more dynamic.

![Screenshot of the Grafana widget Settings dialog, Links tab, showing the Links tab where links can be added between widgets.](images/grafana_link5.png)

By saving and closing the settings, the widget will be changed accordingly.

## Real Use Case

To fully utilize the Grafana widget, you can connect it to a [[user-guide-uipage-widgets-form]] widget. Follow the steps below to set it up.

1. Drag and drop the Form widget into your UI Page and select its **Settings**:

    ![Screenshot showing the Form widget context menu with the Settings option highlighted, next to the Grafana widget.](images/grafana_form1.png)

2. Go to the **Fields** tab, select :material-plus: to change the TimeUnit variable(Type: String), and then **Save and Close**:

    ![Screenshot of the Form widget Settings dialog, Fields tab, showing the TimeUnit field configured with the String value type.](images/grafana_form2.png)

3. In the build mode of your UI Page, define a value for the new TimeUnit:

    ![Screenshot of the UI Page in build mode, showing the Form widget with the TimeUnit field set to a value, next to the Grafana widget.](images/grafana_form3.png)

4. In the top ribbon, select **Settings**, then in the **Properties** tab, selected :material-plus: to add a new property for your TimeUnit label. Set the appropriate **Name**, **Source**, **Type**, and **Value** (key of the variable in Grafana), then **Save and Close**:

    ![Screenshot of the UI Page Settings dialog, Properties tab, showing the TimeUnitLabel property configured with its Name, Source, and Type.](images/grafana_form4.png)

5. Select **Links** and drag and drop the Forms and Grafana widgets onto your page:

    ![Screenshot of the UI Page Links tab, showing the Connectable Items panel with the Form and Grafana widgets available to drag onto the canvas.](images/grafana_link1.png)

    It will look like this:

    ![Screenshot showing the Form and Grafana widgets placed on the Links diagram canvas, with their properties listed.](images/grafana_link2.png)

6. Connect the Form and Grafana widget as shown below:

    ![Screenshot showing a connection between a Form and a Grafana widget.](images/grafana_link2_form.png)

7. To send the result of the TimeUnitChange String to the variables input of the Grafana widget (a map), select the Converter `Set Value in Map` in **Converter** and the Property Key `TimeUnitLabel`, created earlier, in the Converters wizard:

    ![Screenshot of the Converters dialog, showing the Set Value in Map converter configured with the TimeUnitLabel property key for the link between the Form's TimeUnit Change and the Grafana widget's Variables.](images/grafana_link3.png)

8. Ensure your Links Diagram resembles the image below.

    ![Screenshot showing a diagram of a "Links Diagram" resembling the 1B Form Hybrid Revenue Change.](images/grafana_link4.png){width=700}

9. To verify your link configuration, select the **Settings** option of the Grafana widget, access the **Links** tab, and press :core-static-validate-lg: icon.
If no error message is displayed, your link is correctly configured.

    ![Screenshot of the Grafana widget Settings dialog, Links tab, showing the configured link between the Form and Grafana widgets after validation.](images/grafana_link5.png)

10. By saving and closing the settings, the widget will be updated accordingly.

    ![Screenshot showing the UI Page after configuration is saved, with the Form's TimeUnitLabel field and the Grafana dashboard now linked and displaying data.](images/grafana5.png)

!!! info
    For more information, see the [[tutorials-grafana_datamanager]] and [[tutorials-grafana_ui_pages]] tutorials.