# DB UI template problem when used from remote browser

**URL:** https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242
**Category:** Dashboard
**Created:** [28 November 2023 09:29 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242 "2023-11-28T09:29:55Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)
#### Post date: [28 November 2023 09:29 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242/1 "2023-11-28T09:29:55Z")

</div>

Hi all ,

In one of my flow, I use a UI template node, which is used for several things :

- handle JS tabulator features , this part works well, either from a browser running on the same computer as NR, or from a remote browser.

- copy content of a cvs passed as msg.data to the OS clipboard , using this piece of code :

```auto
            case "copytoclipboard":

                //$scope.send({payload: "this is copyclipboard"});
                // Copy the text inside the text field
                navigator.clipboard.writeText(msg.data);
                
                // Alert the copied text
                alert("Copied the text: " + msg.data);
                
                break;

```

This works perfectly when using in the local browser ( same computer as the one running Node Red), but not from another browser over the network, I get the ierror in browser console :

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2c86c3048226bd0257b907a74c32a7a609d2550.png)

Does anyone have any idea about where this problem come from ?

For reference if helpful, here is the full code of the UI template node :

```auto
<form>
    <div id="gridExample" style="background-color:#000000;margin:0px;border:0px solid black"></div>
</form>

<script type="text/javascript">
    var $scope = this.scope;

var grid = new Tabulator("#gridExample", {
    rowFormatter : function(row){
        // chnage row color based on mainDstIp specific value 
        if(row.getData()["vertexType"].includes("V")){
            row.getElement().style.backgroundColor = "#b3ffb3";
            row.getElement().style.color = "black";
            }
        if(row.getData()["vertexType"].includes("A")){
            row.getElement().style.backgroundColor = "#ffb3cc";
            row.getElement().style.color = "black";
            }
        if(row.getData()["vertexType"].includes("D")){
            row.getElement().style.backgroundColor = "#b3daff";
            row.getElement().style.color = "black";
            }
},
    layout:"fitColumns", //fitColumns
    movableColumns: true,
    headerVisible: true,
    resizableColumns: true,
    //selectable: 5,
    //responsiveLayout: "collapse",
    //autoResize: true,
    pagination: "true",
    paginationSizeSelector:[10, 25, 50, 100, true], //select list with an "all" option at the end of the list
    height: "800px",
    groupBy:["rxTx", "control"],
    groupToggleElement:"header", //toggle group on click anywhere in the group header
    // groupStartOpen: true,
    
    data:[
    ],
    
    columns:[/*
              {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
         cell.getRow().toggleSelect();
    }}*/
    {
    formatter:"rowSelection",
    titleFormatter:"rowSelection",
    titleFormatterParams:{
        rowRange:"active"
        }, //only toggle the values of the active filtered rows
        hozAlign:"center", 
        headerSort:false, 
        cellClick:function(e, cell){
            cell.getRow().toggleSelect();
    }},
            //{title:"ID", field:"#", resizable: true, formatter:"textarea", width:200},
            {title:"Factory label", field:"Factory label", resizable: true, formatter:"textarea", width:200},
                        {title:"Rx/Tx", 
                        field:"rxTx", 
                        resizable: true,  
                        editor:"input", 
                        headerFilter:true, //show header filter matching the cells editor, 
                        width:100},
    
            {title:"chNumber", 
            field:"chNumber", 
            resizable: true,  
            editor:"input", 
            headerFilter:true, //show header filter matching the cells editor, 
            width:100},
            {title:"tags", field:"tags", resizable: true, width:250},
            {title:"descriptor", field:"descriptor", resizable: true, width:300},
            {title:"control", field:"control", resizable: true, width:100},
            {title:"useAsEndpoint", field:"useAsEndpoint", formatter:"tickCross", resizable: true, width:100},
            {title:"sdpSupport", field:"sdpSupport", formatter:"tickCross",resizable: true, width:120},
            {title:"sipsMode", field:"sipsMode", resizable: true, width:100},
            {title:"active", field:"active",formatter:"tickCross", resizable: true, width:100},

            {title:"mainDstIp", field:"mainDstIp", resizable: true, width:100},
            //{title:"mainDstPort", field:"mainDstPort", resizable: true, width:100},
            {title:"spareDstIp", field:"spareDstIp", resizable: true, width:100}
            //{title:"spareDstPort", field:"spareDstPort", resizable: true, width:100}

      ]
    });

    grid.on("tableBuilt", function(){
        $scope.send({payload: "Grid is ready"});
    });

grid.on("dataFiltered", function(filters, rows){
console.log(`Post-filter event: ${rows.length} rows`);
let data = [];
for (let i = 0 ; i < rows.length; i++) 
data.push(rows[i]._row.data);
var msg = {};
msg.payload = data;
msg.topic = "filtered_content";
msg.length = rows.length;
$scope.send(msg);
//$scope.send({topic:"filtered_content"},{payload: "export" + data}); 
});
/*
grid.on("dataFiltered", function(filters, rows){
        //filters - array of filters currently applied
        //rows - array of row components that pass the filters
        console.log(`Post-filter event: ${rows.length} rows`);
        for (let i = 0 ; i < rows.length; i++)
            console.log(Object.entries(rows[i]));
    });
*/
    grid.on("rowClick", function(e, row){
    //alert("Row " + row.getData().descriptor + " Clicked!!!!");
    $scope.send({payload: row.getData().descriptor + " Clicked!!!!"});
    });

(function(scope) {
    $scope.$watch('msg', function(msg)
    {
        if (msg)
        switch (msg.payload)
        {
            case "setdata":
                //grid.clearData();
                grid.setData(msg.data);
                $scope.send({payload: "Grid updated"});
                break;

            case "copytoclipboard":

                navigator.clipboard.writeText(msg.data);

                alert("Copied the text: " + msg.data);
                
                break;

        }
    });
})(scope);
</script>

```

Thanks in advance,

Jerome

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [28 November 2023 11:17 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242/2 "2023-11-28T11:17:38Z")

</div>

I think this is related to the Clipboard API having restrictions.

Such as requiring SSL if not localhost - you might need to rethink your approach, or use SSL on your dashboard

[Clipboard: writeText() method - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)

---

<div class="post-metadata">

### Author: ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)
#### Post date: [28 November 2023 12:49 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242/3 "2023-11-28T12:49:47Z")

</div>

Hi,

thanks for your reply, I'll dig into it.

Jerome

---

<div class="post-metadata">

### Author: ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)
#### Post date: [28 November 2023 20:22 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242/4 "2023-11-28T20:22:45Z")

</div>

Indeed it seems directly related to the SSL thing.

We'll check to switch dashboard to https.

Thanks for bringing us on the right path.

---

<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: [28 December 2023 20:23 UTC](https://discourse.nodered.org/t/db-ui-template-problem-when-used-from-remote-browser/83242/5 "2023-12-28T20:23:05Z")

</div>

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