Building a dashboard by coding

Development Tools Cloud IoT
1

I have some experience with creating dashboards in the Cloud and makeing them work with my Arduino boards. That has always been about editing the dashboard in the editor. But is it possible to create the dashboard by coding or scripting?

What I want is a dashboard including a dropdown menu, where I have 10 to 20 items. The items need to be in an alphabetical order. I would be ok with editing in the dashboard editor, when I create everything. But later, when I want to add items, it would be nice if I could just add them anywhere in the list. But the editor only adds them at the end. To retain the alphabetical order, I now need to delete stuff and re-enter it. Just editing say an XML file would be nice. Even nicer, if the dashboard editor would allow more flexible editing.

2

Back in the days of Napster and MySpace these were calles "skins."

3

Hi @Johan_Ha.

It is possible to create and modify dashboards via code by using the Arduino Cloud IoT API:

https://docs.arduino.cc/cloud-api/

The first step is to create an Arduino Cloud API key:

https://docs.arduino.cc/arduino-cloud/api/arduino-iot-api/#api-keys--authentication

ⓘ API keys are only available when using a "Maker" Arduino Cloud plan (or higher).

Next, you must create an authentication token from your API key to use in the API requests:

https://docs.arduino.cc/cloud-api/#:~:text=Properties%20and%20Timeseries.-,Create%20Auth%20Token,-This%20API%20can

For example, using the curl and jq tools from a POSIX shell:

$ ARDUINO_CLIENT_ID=<your client ID>

$ ARDUINO_CLIENT_SECRET=<your client secret>

$ ARDUINO_TOKEN="$(
    curl \
      --request POST \
      --url "https://api2.arduino.cc/iot/v1/clients/token" \
      --header "content-type: application/x-www-form-urlencoded" \
      --data "grant_type=client_credentials" \
      --data "client_id=$ARDUINO_CLIENT_ID" \
      --data "client_secret=$ARDUINO_CLIENT_SECRET" \
      --data 'audience=https://api2.arduino.cc/iot' \
    | \
    jq \
      --raw-output \
      '.access_token'
  )"

Lets say you want to add a new value with label "baz" and value "123" to a "Value Dropdown" widget in an existing dashboard. You would then get the data for the dashboard:

https://docs.arduino.cc/cloud-api/dashboards-api/#Dashboards%20V2%20List

$ curl \
    --request GET \
    --header "Authorization: Bearer $ARDUINO_TOKEN" \
    "https://api2.arduino.cc/iot/v2/dashboards" \
  | \
  jq .

% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   421  100   421    0     0   1349      0 --:--:-- --:--:-- --:--:--  1358
[
  {
    "created_by": {
      "user_id": "e47d8721-f9b6-4f49-b2e3-96dffdb5b98f",
      "username": "ptillisch"
    },
    "id": "92ac8caf-e91e-49ba-859d-49a41ef2be98",
    "name": "Untitled Dashboard",
    "updated_at": "2025-11-06T05:05:11.296676Z",
    "widgets": [
      {
        "height": 3,
        "id": "c1cc791d-e1ad-4a75-ba91-f4e65bb4bd21",
        "options": {
          "values": [
            {
              "label": "foo",
              "value": 11
            },
            {
              "label": "bar",
              "value": 42
            }
          ]
        },
        "type": "Value Dropdown",
        "width": 9,
        "x": 0,
        "y": 0
      }
    ]
  }
]

Then patch the dashboard:

https://docs.arduino.cc/cloud-api/dashboards-api/#Dashboards%20V2%20List

$ ARDUINO_DASHBOARD_ID="92ac8caf-e91e-49ba-859d-49a41ef2be98"

$ curl \
    --request PATCH \
    --header "Authorization: Bearer $ARDUINO_TOKEN" \
    --header "Content-Type: application/json" \
    "https://api2.arduino.cc/iot/v2/dashboards/$ARDUINO_DASHBOARD_ID" \
    --data '
      {
        "widgets": [
          {
            "height": 3,
            "id": "c1cc791d-e1ad-4a75-ba91-f4e65bb4bd21",
            "type": "Value Dropdown",
            "width": 9,
            "x": 0,
            "y": 0,
            "options": {
              "values": [
                {
                  "label": "foo",
                  "value": 11
                },
                {
                  "label": "bar",
                  "value": 42
                },
                {
                  "label": "baz",
                  "value": 123
                }
              ]
            }
          }
        ]
      }
    ' \
  | \
  jq .

% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1094  100   449  100   645   1439   2068 --:--:-- --:--:-- --:--:--  3529
{
  "created_by": {
    "user_id": "e47d8721-f9b6-4f49-b2e3-96dffdb5b98f",
    "username": "ptillisch"
  },
  "id": "92ac8caf-e91e-49ba-859d-49a41ef2be98",
  "name": "Untitled Dashboard",
  "updated_at": "2025-11-06T05:11:02.573918Z",
  "widgets": [
    {
      "has_unlinked_variable": false,
      "height": 3,
      "id": "c1cc791d-e1ad-4a75-ba91-f4e65bb4bd21",
      "options": {
        "values": [
          {
            "label": "foo",
            "value": 11
          },
          {
            "label": "bar",
            "value": 42
          },
          {
            "label": "baz",
            "value": 123
          }
        ]
      },
      "type": "Value Dropdown",
      "width": 9,
      "x": 0,
      "y": 0
    }
  ]
}

I performed the requests using curl for the sake of simplicity, but you can also do this using your favorite programming language, which will be more appropriate for anything more involved than an occasional simple operation like shown above.

Arduino Cloud CLI?

There is a command line tool for managing Arduino Cloud IoT projects, named Arduino Cloud CLI:

https://docs.arduino.cc/arduino-cloud/arduino-cloud-cli/getting-started/#create-dashboard

For simple operations, this is much more convenient to use than the API. Unfortunately, there are some limitations that make it not meet the requirements of your specific use case:

  • Arduino Cloud CLI doesn't have the capability to modify an existing dashboard; only to create a new dashboard.
  • Arduino Cloud CLI doesn't use the set of widget option values specified in the template code, but instead simply creates a widget with the default options.

Although it would be inconvenient and possibly problematic for some use cases, the former limitation could be worked around to some extent by deleting the previous dashboard after creating the new one. However, I think the latter limitation is likely a show stopper for you.