# HTML Template Node - Default value and sending clicked option

**URL:** <https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087>\
**Category:** General\
**Created:** [15 October 2022 21:16 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087 "2022-10-15T21:16:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PedroFilipe](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PedroFilipe](https://discourse.nodered.org/u/PedroFilipe)\
**Post date:** [15 October 2022 21:16 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/1 "2022-10-15T21:16:55Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/947677adc3f6af411e1b7d0e03fc141849708bc3.png)

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 October 2022 14:07 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/2 "2022-10-16T14:07:41Z")

</div>

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.

```auto
<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

```auto
[{"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":[]}]

```

---

<div class="post-metadata">

**Author:** ![PedroFilipe](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PedroFilipe](https://discourse.nodered.org/u/PedroFilipe)\
**Post date:** [16 October 2022 22:07 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/3 "2022-10-16T22:07:13Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 October 2022 00:04 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/4 "2022-10-17T00:04:19Z")

</div>

Try this

Flow

```auto
[{"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

```auto
<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

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![PedroFilipe](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PedroFilipe](https://discourse.nodered.org/u/PedroFilipe)\
**Post date:** [17 October 2022 00:47 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/5 "2022-10-17T00:47:16Z")

</div>

> [@E1cid](#):
>
> ```auto
> <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>
> 
> ```

Thanks so much, this worked exactly as i wanted!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 October 2022 00:47 UTC](https://discourse.nodered.org/t/html-template-node-default-value-and-sending-clicked-option/69087/6 "2022-10-31T00:47:17Z")

</div>

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