Visualize current state of values

🟢 Beginner

dashboard variable

osp-web osp-variables

This example shows how to display live value states in a dashboard using a Value subscription widget, useful for real-time debugging during integration.

• Create a boolean variable with owner.variables to serve as a test value.

• Add a Value subscription widget to a dashboard via the edit mode.

• Bind the widget to one or more values and subscribe to their live state updates.

• Toggle the variable directly from the widget to verify write and display behaviour.

git checkout origin/osp-web-configuration .
git checkout origin/osp-variables-configuration .
git checkout origin/example-dashboard-value-subscription .

Steps

1. Create a new empty dashboard

root/dashboards/values/dashboard.web

{
    "moduleId": "modules.web.web-1",
    "title": "Tutorial dashboard",
    "description": "Tutorial dashboard",
    "tags": ["Tutorial"]
}

root/dashboards/values/dashboard.view

{
    "configuration": [
    ],
    "layout": {
        "lg": []
    }
}

2. Create a boolean variable to be used in the value subscription

root/variables/example/value.ospp

{
    "name": "Boolean variable",
    "description": "Example - Variable displayed and controlled using the subscription widget",
    "type": "BOOLEAN"
}

root/variables/example/owner.variables

{
  "moduleId": "modules.variables.variables-1"
}

3. Push the configuration to the osp-configuration-dispatcher

git add .
git commit -m "Add new dashboard"
git pull
git push

4. Login to the dashboard and select the previously created dashboard

5. Click on the edit dashboard button and add a new “Value subscription” widget

Click on the validate button.

6. Drag and drop the widget to layout along your needs, and click again on the edit dashboard button to generate the layout properly

At the moment, the value subscription widget should display an error about configuration.

7. From the edit view, click on the description button and copy its content

Add the boolean variable created before to the values list. It should be something like

root/dashboards/values/dashboard.view

{
    "configuration": [
        {
            "type": "ValueSubscription",
            "id": "amq94Tog",
            "title": "",
            "valueSubscriptions": {
                "values": [{
                    "id": "root.variables.example",
                    "right": "READ",
                    "type": "BOOLEAN"
                }]
            }
        }
    ],
    "layout": {
        "lg": [
            {
                "w": 12,
                "h": 4,
                "x": 0,
                "y": 0,
                "i": "amq94Tog"
            }
        ]
    },
    "breakpoints": {
        "lg": 1200,
        "md": 996,
        "sm": 768,
        "xs": 480,
        "xxs": 0
    },
    "cols": {
        "lg": 12,
        "md": 10,
        "sm": 6,
        "xs": 4,
        "xxs": 2
    }
}

8. Replace the previous content of the dashboard.view file by the content copied in the previous step, and push the modifications

git add .
git commit -m "Add subscription widget"
git pull
git push

9. Refresh the dashboard, and subscribe to some values

10. Click on the toggle button next to the variable to change its state

Add this example in your configuration

You can directly use the following command to add this example into your configuration :

git checkout origin/example-dashboard-value-subscription .