---
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

![grafana][grafana]
  
## 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 Steps

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**:

    ![grafana1][grafana1]

2. The Grafana entry page looks like this:

    ![grafana2][grafana2]

    !!! 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:

    ![grafana1](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.

    ![grafana1](images/grafana4.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![grafana1](images/grafana_style.png)

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

    ![grafana3][grafana3]

    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)

3. In the **Variables** tab, you can :material-plus: or override the variables created in Grafana, along with their details:
  
    ![grafana4_1plan][grafana4_1plan]
  
    !!! note
	    The **Variables** you define in the settings are the default ones, but you can introduce other settings from the UI Page into Grafana.

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

    ![grafana4_2][grafana4_2]

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

    ![grafana_link5][grafana_link5]

6. 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**:

    ![grafana_form1][grafana_form1]

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

    ![grafana_form2][grafana_form2]

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

    ![grafana_form3][grafana_form3]

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**:

    ![grafana_form4][grafana_form4]

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

    ![grafana_link1][grafana_link1]

    It will look like this:

    ![grafana_link2][grafana_link2]

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:

    ![grafana_link3][grafana_link3]

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.

    ![grafana_link5][grafana_link5]

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

    ![grafana5][grafana5]

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

[grafana]: images/grafana.png
[grafana1]: images/grafana1.png
[grafana2]: images/grafana2.png
[grafana3]: images/grafana3.png
[grafana4_1plan]: images/grafana4_1plan.png
[grafana_form1]: images/grafana_form1.png
[grafana_form2]: images/grafana_form2.png
[grafana_form3]: images/grafana_form3.png
[grafana_form4]: images/grafana_form4.png
[grafana_link1]: images/grafana_link1.png
[grafana_link2]: images/grafana_link2.png
[grafana_link3]: images/grafana_link3.png
[grafana_link5]: images/grafana_link5.png
[grafana4_2]: images/grafana4_2.png
[grafana5]: images/grafana5.png