HTML Template Node - Default value and sending clicked option

General
1

On my project, one of my dashboards is an HTML table that displays the values I have stored in a database table. One of the columns of the table is a classification and I want this column to change based on the value chosen on a dropdown. The two problems I have are the following: The default value on the dropdown is blank and I want it to be what is stored on the classification column. The other problem is when an option is selected, I want it to send a message with the tables' entry Unique ID and the option selected so i may change it on the database.

image
image1191×477 21.9 KB

The image shows the code i have right now, any help is appreciated

2

As you never supplied an copyable example I can only give you a simple example
ng-model does not seem to work with selected, I can only offer a work around.

<table><tr ng-repeat="(key,row) in msg.payload.data">
    <td>{{key}}</td>
    <td>{{row.name}}</td> 
    <td>{{row.selected}} 
      <select  ng-model="selected"
        ng-change="send({payload: {table_data: msg.payload, row: key, selected: selected}})">
        <option 
          ng-repeat="opt in row.options"
          value="{{opt.value}}"
          selected="{{opt.value == row.selected}}">
        {{opt.name}}
        </option>
      </select>
    </td>
  </tr>
</table>

This should display the selected value before the dropdowns.

flow example

[{"id":"f965fae249a32808","type":"inject","z":"366a43adb328cf95","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":1940,"wires":[["691d0e46e8424d3c"]]},{"id":"691d0e46e8424d3c","type":"change","z":"366a43adb328cf95","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"table_id\":\"table1\",\"data\":{\"1\":{\"name\":\"one\",\"selected\":\"select:\",\"options\":[{\"name\":\"one\",\"value\":\"one\"},{\"name\":\"two\",\"value\":\"two\"}]},\"2\":{\"name\":\"one\",\"selected\":\"select:\",\"options\":[{\"name\":\"one\",\"value\":\"one\"},{\"name\":\"two\",\"value\":\"two\"}]},\"3\":{\"name\":\"one\",\"selected\":\"select:\",\"options\":[{\"name\":\"one\",\"value\":\"one\"},{\"name\":\"two\",\"value\":\"two\"}]},\"4\":{\"name\":\"one\",\"selected\":\"select:\",\"options\":[{\"name\":\"one\",\"value\":\"one\"},{\"name\":\"two\",\"value\":\"two\"}]}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":1940,"wires":[["dcb5b90b254a32c8"]]},{"id":"dcb5b90b254a32c8","type":"change","z":"366a43adb328cf95","name":"Replace with ui-template node","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":1940,"wires":[["df2572a58f581bdd","bd7a03aff18896d1"]]},{"id":"bd7a03aff18896d1","type":"change","z":"366a43adb328cf95","name":"","rules":[{"t":"set","p":"temp","pt":"msg","to":"payload.table_data","tot":"msg"},{"t":"set","p":"temp.data[msg.payload.row].selected","pt":"msg","to":"payload.selected","tot":"msg"},{"t":"move","p":"temp","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":2000,"wires":[["dcb5b90b254a32c8"]]},{"id":"df2572a58f581bdd","type":"debug","z":"366a43adb328cf95","name":"debug 99","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":720,"y":1880,"wires":[]}]
3

Sorry, still lost. I tried to import your flow example but couldn't get it to work.
You mentioned not putting a copyable example, i'm going to paste my template node code down below. I'm not too familiar with HTML so I don't understand most of the example code you offered.

<table id="reportTbl" style="width:100%">
  <tr>
    <th>Índice</th> 
    <!--<th>UID</th> -->
    <th>ID de Entrega</th> 
    <th>Data</th> 
    <th>Tipo de Operação</th>
    <th>Classificação</th>
    <th>Vídeo</th>
  </tr>
  <tr ALIGN=CENTER ng-repeat="x in msg.payload | limitTo:150">
    <td>{{$index}}</td>
    <!--<td>{{msg.payload[$index].UID}}</td>-->
    <td>{{msg.payload[$index].DELIVERY_ID}}</td>
    <td>{{msg.payload[$index].DATE}}</td> 
    <td>{{msg.payload[$index].LOAD_TYPE}}</td>
    <!--<td>{{msg.payload[$index].LOCATION}}</td>-->
    <td><select ng-model="text" ng-change="send({payload: 'UID-Option', topic:'Classificao'})"">
          <option value="Não Classificado">Não Classificado</option>  
          <option value="Danificado">Danificado</option>
          <option value="Não Danificado">Não Danificado</option>
    </select></td>
    <td><a href="/files/{{x.UID}}.mp4" target="_blank" style="color: #6db046"> Descarregar </a></td>
  </tr>
</table>

If you need anything else let me know.

4

Try this

Flow

[{"id":"f965fae249a32808","type":"inject","z":"366a43adb328cf95","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"DELIVERY_ID\":1,\"DATE\":\"a date\",\"LOAD_TYPE\":\"one\",\"UID\":\"one\",\"classification\":\"Não Danificado\"},{\"DELIVERY_ID\":12,\"DATE\":\"a date\",\"LOAD_TYPE\":\"two\",\"UID\":\"two\",\"classification\":null}]","payloadType":"json","x":210,"y":1840,"wires":[["12938762a1fa596b"]]},{"id":"12938762a1fa596b","type":"ui_template","z":"366a43adb328cf95","group":"2d4fe667.28f8ba","name":"","order":17,"width":0,"height":0,"format":"<table id=\"reportTbl\" style=\"width:100%\">\n  <tr>\n    <th>Índice</th> \n    <!--<th>UID</th> -->\n    <th>ID de Entrega</th> \n    <th>Data</th> \n    <th>Tipo de Operação</th>\n    <th>Classificação</th>\n    <th>Vídeo</th>\n  </tr>\n  <tr ng-repeat=\"x in msg.payload | limitTo:150\">\n    <td>{{$index}}</td>\n    <!--<td>{{x.UID}}</td>-->\n    <td>{{x.DELIVERY_ID}}</td>\n    <td>{{x.DATE}}</td> \n    <td>{{x.LOAD_TYPE}}</td>\n    <!--<td>{{x.LOCATION}}</td>-->\n    <td><select ng-model=\"selected_item\" ng-change=\"send({payload: x.UID, topic:selected_item})\">\n          <option  disabled selected value>{{x.classification||'please select'}}</option>  \n          <option value=\"Não Classificado\">Não Classificado</option>  \n          <option value=\"Danificado\">Danificado</option>\n          <option value=\"'Não Danificado'\">Não Danificado</option>\n    </select></td>\n    <td><a href=\"/files/{{x.UID}}.mp4\" target=\"_blank\" style=\"color: #6db046\"> Descarregar </a></td>\n  </tr>\n</table>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":560,"y":1840,"wires":[["df2572a58f581bdd"]]},{"id":"df2572a58f581bdd","type":"debug","z":"366a43adb328cf95","name":"debug 99","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":740,"y":1780,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

template

<table id="reportTbl" style="width:100%">
  <tr>
    <th>Índice</th> 
    <!--<th>UID</th> -->
    <th>ID de Entrega</th> 
    <th>Data</th> 
    <th>Tipo de Operação</th>
    <th>Classificação</th>
    <th>Vídeo</th>
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:150">
    <td>{{$index}}</td>
    <!--<td>{{x.UID}}</td>-->
    <td>{{x.DELIVERY_ID}}</td>
    <td>{{x.DATE}}</td> 
    <td>{{x.LOAD_TYPE}}</td>
    <!--<td>{{x.LOCATION}}</td>-->
    <td><select ng-model="selected_item" ng-change="send({payload: x.UID, topic:selected_item})">
          <option  disabled selected value>{{x.classification||'please select'}}</option>  
          <option value="Não Classificado">Não Classificado</option>  
          <option value="Danificado">Danificado</option>
          <option value="'Não Danificado'">Não Danificado</option>
    </select></td>
    <td><a href="/files/{{x.UID}}.mp4" target="_blank" style="color: #6db046"> Descarregar </a></td>
  </tr>
</table>

payload

[
    {
        "DELIVERY_ID": 1,
        "DATE": "a date",
        "LOAD_TYPE": "one",
        "UID": "one",
        "classification": "Não Danificado"
    },
    {
        "DELIVERY_ID": 12,
        "DATE": "a date",
        "LOAD_TYPE": "two",
        "UID": "two",
        "classification": null
    }
]
1 Like
5

Thanks so much, this worked exactly as i wanted!

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.