Change properties of a devices dinamically (in function of values inserted by user in a form)


I am trying to do a form in I have tried this example of the documentation and it works me well:

However, when I try to make a form adapting it to our case, that is when the problems arise.

In my case, the path where the property is saved varies dynamically depending on the data entered by the user in the form. Example: we do not know the path to reach “type” until the user enters the name (“type” is, in the image, the dropdownlist “Selecciona una condición”). The same occurs with “action” (its path depends on the “name” chosen by the user).

Therefore, we cannot update the properties of a device (using a form) as shown in the example in the documentation, because in that case the route is static: ng-model=“value.b” (it is not dynamic like ours). Example in a part of the code from the HTML documentation:

<div class="col-sm-12">
      <input type="number" class="form-control" placeholder="Value B" ng-model="value.b" min="0" max="100" required>

For solving this, that we have done is to add those dynamic variables within the angular directive, in the $ function:

$ = function(){
    // Obtención de los valores ingresados por el usuario desde los elementos HTML
    var newSceneName = document.getElementById("newSceneName").value;
    var conditionDropdown = document.getElementById("conditionDropdown").value;
    var actionDropdown = document.getElementById("actionDropdown").value;
    console.log("newSceneName su valor es: " + newSceneName);
    console.log("conditionDropdown su valor es: " + conditionDropdown);
    console.log("actionDropdown su valor es: " + actionDropdown);
    // Construye dinámicamente las rutas dinámicas para los ng-model. CREO QUE NO HACE FALTA ESTE PASO
    /*var ngModelPathName = "";
    var ngModelPathType = "value.valueScene." + newSceneName + ".type";
    var ngModelPathAction = "value.valueScene." + newSceneName + ".actionDropdown";*/
    // Verifica si $scope.value y sus propiedades están definidas
    if (!$scope.valueScene) {
        // Crea un objeto $scope.valueScene si aún no existe
        $scope.valueScene = {};
        $scope.valueScene = $scope.valueScene || {}; // Asegúrate de que valueScene esté inicializado

    if (!$scope.valueScene[newSceneName]) {
        // Crea un objeto dinámico dentro de $scope.valueScene
        $scope.valueScene[newSceneName] = {};
        $scope.valueScene[newSceneName] = $scope.valueScene[newSceneName] || {}; // Asegúrate de que newSceneName esté inicializado

    //Añade el valor a la ruta dinámica
    $scope.valueScene[newSceneName].name = newSceneName;
    $scope.valueScene[newSceneName].type = conditionDropdown;
    $scope.valueScene[newSceneName].actionDropdown = actionDropdown;

    // just call our api to patch values
    $scope.api.patch({value: $scope.value}).then(result => {
    }).catch(error => {


And I have added into the HTML one way of calling the function save():

<body class="create-scene-body">
    <form id="myForm" ng-submit="save()">

However, it does not work.

Does anyone know how to change device properties when routes are dynamic? Or maybe check where is my mistake in the code.

Help, please!

Best regards!


Can it be that you are using $scope.value in the api.patch function instead of $scope.valueScene?

   // just call our api to patch values
   $scope.api.patch({value: $scope.valueScene}).then(result => {
   }).catch(error => {



Yes! It works with that change! Thank you so much @jaimebs !!! :smiley:

Hi @jaimebs ,

One question. I have tried to put the widget in a dashboard. But when I click on “Save” i does not work. It has this error. Maybe that error is from | Open Source IoT Platform

Best regards!

Thaank you!


I tested it in our instances and haven’t been able to reproduce the issue.

That issue usually occurs when the HTML Widget tab, does not have the data source configured.

I don’t see much information in the screenshots. Try maybe refreshing the page before creating again the widget and if it still happens, please send me additional information from the network tab in the developer tools of the browser. For example, I see a 404 in the first message of the screenshot but I don’t see what is not found.