---
pdfexport: true
alias: tutorials-grafana_ui_pages
timetoread: true
tutorial: full
description: "This document guides integration of a Grafana dashboard into a UI page using a Grafana widget, requiring configuration of a"
---

# Grafana Widget

This document will guide you through the required configurations and set up for the integration of a **Grafana** dashboard into a UI Page with the **Grafana** widget.

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

    ![Grafana with no URL](../../../images/grafana_missing_url.png)

## Setting Up Grafana

To have a functioning **Grafana** widget and be able to deploy a full Grafana dashboard within Critical Manufacturing MES, you have to follow the steps in the table below:

| **Step Number** | **Step**                                            | **Description**                                         |
| --------------- | --------------------------------------------------- | ------------------------------------------------------- |
| **1**           | **Configure Grafana** | Configure `/Cmf/Guis/Configuration/Urls/Grafana/` with the appropriate **Value**. |
| **2**           | **Create a UI Page** |  Create a **UI Page** where you will use the **Grafana** widget.|

### Step 1: Configure Grafana

1. Go to the **Administration** menu and select **Configuration**.

2. Search and select the Grafana path to be able to edit it:

    ![Configure Path](../../../images/grafana_configuration.png)

3. Select **Edit** on the top ribbon and enter the **Value** for the current Grafana server:

    ![Enter Grafana Server Value](../../../images/grafana_edit_configuration.png)

4. Select **Save**.

### Step 2: Create a UI Page

1. Create your UI Page:

    ![New UI Page](../../../images/grafana_create_ui_page.png)

2. Select **Create** and your UI Page will be ready to use:

    ![New UI Page1](../../../images/grafana_create_ui_page1.png)

For more information, see [[user-guide-uipages-create-uipage]].

## Configuring the Grafana Widget

1. In the created UI Page, search for the **Grafana** widget:

    ![Search Grafana Widget](../../../images/grafana_search.png)

2. Drag and drop the **Grafana** widget into the desired place and expand it as needed:

    ![Grafana Widget](../../../images/grafana1a.png)

3. If you have not yet created your [Grafana](https://grafana.com) dashboard, select the **More** dropdown, and **Open Grafana** to access the **Grafana** platform, where you can create your dashboard that you will use later in this UI Page:

    ![Grafana Settings](../../../images/grafana1.png)

    !!! note
	    You can access Grafana [**Documentation**](https://grafana.com/docs/grafana/latest/?utm_source=grafana_gettingstarted) and other useful links to help you start creating your Grafana dashboard.

4. When your **Grafana** dashboard is created, copy its address.

5. In your UI Page, select **Settings** in the **More** dropdown of the **Grafana** widget.

6. Select the **Setup** tab and paste the complete address of your created **Grafana** dashboard in the Dashboard URL field:

    ![Grafana Setup](../../../images/grafana3.png)

    In the **Setup** tab you can also select the Theme (defaults to Standard), set whether to Show Controls (defaults to `true`), and Show Menu (defaults to `false`):

    a) Grafana with a light theme and controls bar:

    ![Grafana Light Controls](../../../images/grafanalightcontrols.png)

    b) Grafana with a dark theme and no controls bar:

    ![Grafana Dark No Controls](../../../images/grafanadarknocontrols.png)  

7. In the **General** tab, provide a name for the widget (Grafana by default), and configure the other available options as needed:

    ![Grafana General](../../../images/grafana4.png)

8. In the **Variables** tab you can :material-plus: or override the variables created in Grafana along with their details:
  
    ![Grafana Variables](../../../images/grafana4_1plan.png)
  
    !!! note
	    The Variables you define in the settings are the default ones but you can introduce other settings, like Area or Resource, from the UI Page into Grafana. For this tutorial, we are using a TimeUnit variable.

9. In the **Inputs** tab you can :material-plus: as needed, and the **Name** and **Type**, that relate to the input, are mandatory:

    ![Grafana Inputs](../../../images/grafana4_2.png)

10. In the **Links** tab you can add links and make your UI Page more dynamic. See the example below using a **Form** widget:

    a) Drag and drop the **Form** widget into your UI Page dashboard and select its **Settings**:

    ![Form Widget](../../../images/grafana_form1.png)

    b) Go to the **Fields** tab, select :material-plus: to change the TimeUnit variable, which is of the Type String, and **Save and Close**:

    ![Form Fields](../../../images/grafana_form2.png)

    c) In your UI Page dashboard, define a value for the new TimeUnit:

    ![TimeUnit Value](../../../images/grafana_form3.png)

    d) On the top ribbon of your UI Page, select **Settings**, then in the **Properties** tab :material-plus: a new property that will be your TimeUnit label. Give it the appropriate Name, Source, Type, Value (name of the variable in Grafana), and **Save and Close**:

    ![Properties](../../../images/grafana_form4.png)

    e) In the UI Page, select **Links** and drag and drop the **Forms** and **Grafana** widgets onto your page. It will look like this:

    ![Form and Grafana Widgets](../../../images/grafana_link2.png)

    f) Send the result of the TimeUnit Change String to Variables, which is a map, select `Set Value in Map` in the Converter field, and `TimeUnit Label`, created earlier, in the Key: (Property) field:

    ![Converter](../../../images/grafana_link3.png)

    g) Select **Save and Close**:

    ![Grafana Links](../../../images/grafana_link4.png)

    h) To check your link is correct, go back to the UI Page, select **Settings** on the top ribbon and access the **Links** tab:

    ![Grafana Links Settings](../../../images/grafana_link5.png)

11. **Save and Close** the settings, and the widget will be updated.

    For more information, see the System Widgets [[user-guide-uipage-widgets-grafana]] page in the UI Pages menu.

## Making it Available

You can create a shortcut for your UI Page by editing the **Scope** to **Entity Type** or **Menu Entry**, and setting the **Pin To Quick Access** option to `true`:

![Pin To Quick Access](../../../images/scope_menu_entry.png)

This means that quick access will be visible in the **Dashboards** section of the menu entry for the **Menu Entry** scope, or under **View** for the **Entity Type** scope:

![Menu Entry Quick Access](../../../images/scope_menu_entry_icon.png)

![Entity Type Quick Access](../../../images/scope_entity_type.png)

!!! note
	You can only use the UI Page if it is Effective. Therefore, for the quick access to be visible in the Dashboards you must approve the Change Set and the Universal State must be Effective.

![Screenshot showing a UI page indicating the status of a change set as "Effective" within a scope.](../../../images/scope_effective.png)