# Using ui\_template node

**URL:** <https://discourse.nodered.org/t/using-ui-template-node/79223>\
**Category:** Dashboard\
**Created:** [15 June 2023 08:04 UTC](https://discourse.nodered.org/t/using-ui-template-node/79223 "2023-06-15T08:04:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndyDufresne422](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andydufresne422/32/23915_2.png) [@AndyDufresne422](https://discourse.nodered.org/u/AndyDufresne422)\
**Post date:** [15 June 2023 08:04 UTC](https://discourse.nodered.org/t/using-ui-template-node/79223/1 "2023-06-15T08:04:31Z")

</div>

I'm working on a dashboard and have found a way to implement an HTML5-QRCodeScanner using an mui\_template node (i know that it is different than ui\_dashboard, but has so far functioned pretty much exactly same.)

I've not used template nodes before and have been able to get everything work. The \<div qr-scanner \</div sends the qr results to \<div qr-scanner-results \</div but now I'd like to process this results further.

Basically my questions is how can I pass what is displayed in the results \<div (the results that came from the qr-scanner \<div) into another node? I've connected the mui\_template node to a debug node, but nothing seems to pass. I've read a few template pages, but seem to struggle with implementing any solution (node.send(msg), or scope(send), or var newMsg = {}) but nothing seems to pass beyond the template node...

```auto
[
    {
        "id": "0e156dd3e727a5d4",
        "type": "mui_template",
        "z": "a56e06c3490c9181",
        "group": "c8bdece1102124c6",
        "name": "",
        "order": 9,
        "width": 0,
        "height": 0,
        "format": "<script src=\"https://unpkg.com/html5-qrcode\" type=\"text/javascript\">",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 540,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "47884bca12c15abd",
        "type": "mui_template",
        "z": "a56e06c3490c9181",
        "group": "c8bdece1102124c6",
        "name": "Scanner",
        "order": 3,
        "width": "8",
        "height": "8",
        "format": "<div id=\"qr-reader\" style=\"width:auto\"></div>\n\n<script>\nfunction docReady(fn) {\n// see if DOM is already available\nif (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n// call on next available tick\nsetTimeout(fn, 1);\n} else {\ndocument.addEventListener(\"DOMContentLoaded\", fn);\n}\n}\n\ndocReady(function() {\nvar resultContainer = document.getElementById('qr-reader-results');\nvar lastResult, countResults = 0;\n\nvar html5QrcodeScanner = new Html5QrcodeScanner(\n\"qr-reader\", { fps: 10, qrbox: 250 });\n\nfunction onScanSuccess(decodedText, decodedResult) {\nif (decodedText !== lastResult) {\n++countResults;\nlastResult = decodedText;\nconsole.log(`Scan result = ${decodedText}`, decodedResult);\n\nresultContainer.innerHTML += `<div>${decodedText}</div>`;\n\n// Optional: To close the QR code scannign after the result is found\nhtml5QrcodeScanner.clear();\n}\n}\n\n// Optional callback for error, can be ignored.\nfunction onScanError(qrCodeError) {\n// This callback would be called in case of qr code scan error or setup error.\n// You can avoid this callback completely, as it can be very verbose in nature.\n}\n\nhtml5QrcodeScanner.render(onScanSuccess, onScanError);\n});\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 540,
        "y": 260,
        "wires": [
            [
                "36a16f2297534d67"
            ]
        ]
    },
    {
        "id": "36a16f2297534d67",
        "type": "debug",
        "z": "a56e06c3490c9181",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 680,
        "y": 260,
        "wires": []
    },
    {
        "id": "63e1b056ba246d73",
        "type": "mui_template",
        "z": "a56e06c3490c9181",
        "group": "c8bdece1102124c6",
        "name": "",
        "order": 8,
        "width": "10",
        "height": "1",
        "format": "<div id=\"qr-reader-results\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 540,
        "y": 300,
        "wires": [
            [
                "9923a21df1fcd66f"
            ]
        ]
    },
    {
        "id": "9923a21df1fcd66f",
        "type": "debug",
        "z": "a56e06c3490c9181",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 680,
        "y": 300,
        "wires": []
    },
    {
        "id": "c8bdece1102124c6",
        "type": "mui_group",
        "name": "Signout Form Part 02",
        "tab": "3c91de014af2fdbb",
        "order": 6,
        "disp": false,
        "width": "10",
        "collapse": false
    },
    {
        "id": "3c91de014af2fdbb",
        "type": "mui_tab",
        "name": "ePass",
        "icon": "fa-menu",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

```

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:** [15 June 2023 09:57 UTC](https://discourse.nodered.org/t/using-ui-template-node/79223/2 "2023-06-15T09:57:17Z")

</div>

Try

```auto
[{"id":"47884bca12c15abd","type":"mui_template","z":"b9860b4b9de8c8da","group":"c8bdece1102124c6","name":"Scanner","order":3,"width":"8","height":"8","format":"<div id=\"qr-reader\" style=\"width:auto\"></div>\n\n<script>\n(function(scope) {\n function docReady(fn) {\n // see if DOM is already available\n if (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n // call on next available tick\n setTimeout(fn, 1);\n } else {\n document.addEventListener(\"DOMContentLoaded\", fn);\n }\n }\n\n docReady(function() {\n var resultContainer = document.getElementById('qr-reader-results');\n var lastResult, countResults = 0;\n\n var html5QrcodeScanner = new Html5QrcodeScanner(\n \"qr-reader\", { fps: 10, qrbox: 250 });\n\n function onScanSuccess(decodedText, decodedResult) {\n if (decodedText !== lastResult) {\n ++countResults;\n lastResult = decodedText;\n console.log(`Scan result = ${decodedText}`, decodedResult);\n\n resultContainer.innerHTML += `<div>${decodedText}</div>`;\n\n scope.send({payload:decodedText});\n // Optional: To close the QR code scannign after the result is found\n html5QrcodeScanner.clear();\n }\n }\n // Optional callback for error, can be ignored.\n function onScanError(qrCodeError) {\n // This callback would be called in case of qr code scan error or setup error.\n // You can avoid this callback completely, as it can be very verbose in nature.\n }\n\n html5QrcodeScanner.render(onScanSuccess, onScanError);\n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":340,"y":140,"wires":[["36a16f2297534d67"]]},{"id":"c8bdece1102124c6","type":"mui_group","name":"Signout Form Part 02","tab":"3c91de014af2fdbb","order":6,"disp":false,"width":"10","collapse":false},{"id":"3c91de014af2fdbb","type":"mui_tab","name":"ePass","icon":"fa-menu","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![AndyDufresne422](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andydufresne422/32/23915_2.png) [@AndyDufresne422](https://discourse.nodered.org/u/AndyDufresne422)\
**Post date:** [15 June 2023 16:28 UTC](https://discourse.nodered.org/t/using-ui-template-node/79223/3 "2023-06-15T16:28:21Z")

</div>

Thank you so much! I see what I did wrong.

Really appreciate the help!

---

<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:** [29 June 2023 16:29 UTC](https://discourse.nodered.org/t/using-ui-template-node/79223/4 "2023-06-29T16:29:00Z")

</div>

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