page-js.html

<script>
    document.getElementById('idCBS').readOnly = true;

    document.getElementById("btnserno").addEventListener("click",fetchCBS);
    function fetchCBS(){
        document.getElementById("idCBS").innerHTML = "";
        var sernum = document.getElementById("serial").value;
        google.script.run
        .withSuccessHandler(printCBS)
        .queryCBS(sernum);
        document.getElementById("serial").value = "";
    }
    
    window.printCBS = function(CBS) {
    // console.log(CBS);
    
    var i,innerArray;
    var L = CBS[0].length;
  
    for (i=0;i<L;i++) {
    innerArray = CBS[0][i];
  
    value1 = innerArray[0]; 
    value2 = innerArray[1];
    value3 = innerArray[2];
    value4 = innerArray[3];
    value5 = innerArray[4];
    
    let html='<style>td,th{border:0px solid black;}</style><table>';
        html+='<tr><td><a target="_blank" href="https://script.google.com/a/macros/WebAddressOfTheCB_QueryDetailsWebApp/exec?sn=' + value1 + '">' + value1 + '</a></td><td>' + value2 + '</td><td>' + value3 + '</td><td>' + value4 + '</td><td>' + value5 + '</td></tr>';
        // You may have to replace the entire web URL, since your Workspace domain may be a part of your URL
        // Do note that enabling the previous line requires you first set up CB_QueryDetails, which will act on the clickable links
        // CB_QueryDetails can be found here https://github.com/NoSubstitute/CB_QueryDetails
        // Do also look into CB_DeviceDetails, as it has more features, even if it's in Swedish
        // https://github.com/NoSubstitute/CB_DeviceDetails
    html+='</table>';
    
    var myTable = document.getElementById("idCBS");
    myTable.insertAdjacentHTML("beforeend", html);
    }
}
    
    document.getElementById("btnusername").addEventListener("click",fetchUserDevices);
    function fetchUserDevices(){
        document.getElementById("idCBS").innerHTML = "";
        var uname = document.getElementById("username").value;
        google.script.run
        .withSuccessHandler(printUD)
        .queryUserDevices(uname);
        document.getElementById("username").value = "";
    }

        window.printUD = function(UD) {
        // console.log(UD);

    var i,innerArray;
    var L = UD[0].length;
  
    for (i=0;i<L;i++) {
    innerArray = UD[0][i];
  
    value1 = innerArray[0]; 
    value2 = innerArray[1];
    value3 = innerArray[2];
    value4 = innerArray[3];
    value5 = innerArray[4];
      
    let html='<style>td,th{border:0px solid black;}</style><table>';
        html+='<tr><td><a target="_blank" href="https://script.google.com/a/macros/WebAddressOfTheCB_QueryDetailsWebApp/exec?sn=' + value1 + '">' + value1 + '</a></td><td>' + value2 + '</td><td>' + value3 + '</td><td>' + value4 + '</td><td>' + value5 + '</td></tr>';
        // Do note that enabling the previous line requires you first set up CB_QueryDetails, which will act on the clickable links
        // CB_QueryDetails can be found here https://github.com/NoSubstitute/CB_QueryDetails
        // Do also look into CB_DeviceDetails, as it has more features, even if it's in Swedish
        // https://github.com/NoSubstitute/CB_DeviceDetails
    html+='</table>';
    
    var myTable = document.getElementById("idCBS");
    myTable.insertAdjacentHTML("beforeend", html);
    }
}

    document.getElementById("clearResults").addEventListener("click",clrResults);
    function clrResults(){
        document.getElementById("idCBS").innerHTML = "";
    }
</script>