Grafana#

Overview#

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

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:

   

2. The Grafana entry page looks like this:

   

   Note

   This page is very important because in the Need help? section you can access Documentation ⧉ 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:

   

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.

   

Widget Customization#

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

   

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

   

3. 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 leftGrafana with a dark theme and no controls bar

   

   

4. In the Variables tab, you can or override the variables created in Grafana, along with their details:

   

   Note

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

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

   

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

   

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

   

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

   

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

   

4. In the top ribbon, select Settings, then in the Properties tab, selected 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:

   

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

   

   It will look like this:

   

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

   

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:

   

8. Ensure your Links Diagram resembles the image below.

   

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

   

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