Input a dynamic data dropdown list from thinger.io - Widget HTML

[EBA]

Hello,

I am trying to do an HTML Widget. This is a table where some cells will have a dropdownlist with dynamic data from our devices. Where one columns will be “Devices” (with a dynamic list of the devices that we have) and another column “Group Devices” (with a dynamic list of the group devices that we have). Example:

But my main problem is that I don’t know how acces to this information (the devices and the groups devices that we have). I am trying this in the “script” part of the HTML:

/*


<script>
  // Realiza una solicitud a la API de Thinger.io para obtener datos dinámicos
  var apiURL = 'https://api.thinger.io/v2/users/MYUSERNAME/devices?type=MYVIRTUALTYPEDEVICE';
  var token = 'MYTOKEN';

  fetch(apiURL, {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer ' + token
    }
  })
  .then(response => response.json())
  .then(data => {
    // Extrae los datos relevantes para las columnas
    var devices = data.map(Devices => Devices.properties.name);
    var groups = data.map(device => device.grupo);

*/

My problem is here, in trhe last two command lines:

var devices = data.map(Devices => Devices.properties.name);
var groups = data.map(device => device.grupo);

How can I get to this information from Thinger.io | Open Source IoT Platform

Thank you so much!

[jaimebs]

Hi @EBA

I think those two lines should be:

var devices = data.map(Devices => Devices.name);
var groups = data.map(device => device.asset_group);

Also, that endpoint should be v1 instead of v2. You can find the available endpoints at: Swagger UI or for your private instance at: <host>/swagger/index.html

To get the response structures you may use the developer tools of your browser while loading the device page for example, as the frontend is built on top of the API.

Best Regards!

[EBA]

Thank you!

I continue having the same problem. I would like to get the information placed on the “Devices” menu, specifically to the fields marked with a red square (like in the image). They are not in “properties devices”

Best regards!

[jaimebs]

Hello @EBA

Can you please expand on:

They are not in “properties devices”

Please share the updated code, otherwise I can’t know what could be wrong.

Also, there is a source switcher widget which may be helpful in achieving a similar approach as dynamic table

[EBA]

Sure!

In “Devices” menu, we have a field called “Device” which save information about the name of the device. Example:

I would like to create a dynamic data dropdown list in a dahsboard, which show in these options the devices availables by the name of the devices. Nevertheles, I don’t know how to get to that information (to the name). I know that we could get information about the properties of the device (or bucket), and we could put the “name” as a property of the device (like in the next image), but it is duplicate information, because the information of the name already exists.

For other hand, in this case, I couldn’t use a source switcher widget. The main objective is creating a table for showing which products are in X groups. A source switcher widget just let me show one device i one panel of a dashboard.

Thank you!

[jaimebs]

Hi @EBA

I agree with you that saving the name of the device as a property is not the best way to handle this.

Checkout the links from my previous post, which contains every API available in the platform.

For example, you can list all devices with this endpoint

Using curl it would be something like this:

curl -XGET -H 'Authorization: Bearer <auth_token>' 'https://<hostname>.aws.thinger.io/v1/users/<user>/devices'

This would return a json array with the devices as object elements:

[
  {
    "asset_group": "esp32",
    "asset_type": "temperatures",
    "connection": {
      "active": false,
      "security": "TLSv1.2",
      "ts": 1695813004206
    },
    "created": 1688641718850,
    "description": "test",
    "device": "test",
    "enabled": true,
    "modified": 1695813004206,
    "name": "test",
    "product": "test",
    "type": "Generic",
    "user": "thinger"
  }
]

You can see here that it contains the name and asset_group for the dynamic table.

Also, to find the necessary API endpoint I find it useful to use the developer options in the browser while navigation the platform