如何在 Google 脚本 HTML Web 应用程序中创建时间表仪表板答案

【问题标题】：How to create a timesheet dashboard in Google script HTML web app如何在 Google 脚本 HTML Web 应用程序中创建时间表仪表板
【发布时间】：2017-08-01 12:14:31
【问题描述】：

我正在尝试在 Google 脚本 HTML Web 应用程序中创建仪表板，数据包括、分配的项目和用户在项目上花费的总时间

我使用了一些 HTML 代码，但是它变得混乱，共享包含数据的谷歌表，我想在网络应用程序中复制这些数据。我在这里查看的功能是“日期选择器”“用户名/项目名称”是搜索参数

仪表板应根据搜索参数反映，数据应包括按用户划分的总工作用户数或在项目上花费的总小时数或用户数。

我知道这有点复杂，如果您参考我的工作表，您就会知道我希望在网络应用程序中发布什么

Sheet

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function getData() {
  return SpreadsheetApp
      .openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
      .getSheetByName('Sheet4')
      .getDataRange()
      .getValues();
}

function getData1() {
  return SpreadsheetApp
      .openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
      .getSheetByName('Sheet5')
      .getDataRange()
      .getValues();
}


function getData2() {
  return SpreadsheetApp
      .openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
      .getSheetByName('Sheet6')
      .getDataRange()
      .getValues();
}

function getData3() {
  return SpreadsheetApp
      .openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
      .getSheetByName('Sheet7')
      .getDataRange()
      .getValues();
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }

    .carousel-inner img {
      width: 100%; /* Set width to 100% */
      min-height: 200px;
    }

   
      }
    }
  </style>
</head>
<body>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
  <div class="row">
    <div class="col-xs-3"><label for="usr"><p class="text-primary">User Name</label><input type="text" class="form-control" id="#"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Date Range Picker</label><input type="text" class="form-control" id="#"></div>
    
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
    <div class="col-sm-6">
      <div class="well">
       <p><html>
<? var data = getData(); ?>

<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
 <p>Today Report</p>
  <td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
  <td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
  <? for (var i = 0; i < data.length; i++) { ?>
    <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
        <td><?= data[i][j] ?></td>
      <? } ?>
    </tr>
  <? } ?>
</table>
</html></p>
      </div>
     <div class="well">
  <table class="table table-bordered">
    <thead>
      <tr>
        <td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
       <td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
      <td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test1</td>
        <td>A</td>
        <td>12:00:00</td>
      </tr>
      <tr>
        <td>Test2</td>
        <td>B</td>
        <td>11:00:00</td>
      </tr>
      <tr>
        <td>Test3</td>
        <td>C</td>
        <td>10:00:00</td>
      </tr>
    </tbody>
  </table>
</div>
      </div>  

    <div class="col-sm-6">
      <div class="well">
        <p><html>
<? var data = getData1(); ?>

<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
  <p>Monthly Report</p>
  <td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
  <td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
  <? for (var i = 0; i < data.length; i++) { ?>
    <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
        <td><?= data[i][j] ?></td>
      <? } ?>
    </tr>
  <? } ?>
</table>
</html></p>
      </div>
      <div class="well">
  <table class="table table-bordered">
    <thead>
      <tr>
        <td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
       <td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
      <td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test1</td>
        <td>A</td>
        <td>122:00:00</td>
      </tr>
      <tr>
        <td>Test2</td>
        <td>B</td>
        <td>211:00:00</td>
      </tr>
      <tr>
        <td>Test3</td>
        <td>C</td>
        <td>190:00:00</td>
      </tr>
    </tbody>
  </table>
</div>
      </div>  
  <hr>

【问题讨论】：

标签： google-apps-script

【解决方案1】：

这是一个与电子表格中包含的 Google Apps 脚本通信的简单 html 文件。我将它作为一个对话框进行了很多测试，我也将它作为一个 Web 应用程序运行。 html 文件和 Google Apps 脚本相互通信，我将一个数组从 html 文件传递给 Google 脚本。希望这会有所帮助。

Code.gs 文件：

function doGet()
{
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

}

function getData(a)
{
  var ts = Utilities.formatDate(new Date(), "GMT-6", "M/d/yyyy' 'HH:mm:ss");
  a.splice(0,0,ts);
  var ss=SpreadsheetApp.openById('SPREADSHEETID')
  ss.getSheetByName('Form Responses 1').appendRow(a);
  return true;
}

function getURL()
{
  var ss=SpreadsheetApp.openById('SPREADSHEETID');
  var sht=ss.getSheetByName('imgURLs');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var urlA=[];
  for(var i=1;i<rngA.length;i++)
  {
    urlA.push(rngA[i][0]);
  }
  return urlA;
}

index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="data">
    <br />Text 1<input name="t1" type="text" size="15" id="txt1" placeholder="Text 1" />
    <br />Text 2<input name="t2" type="text" size="15" id="txt2" placeholder="Text 2" />
    <br />Text 3<input name="t3" type="text" size="15" id="txt3" placeholder="Text 3" />
    <br />Text 4<input name="t4" type="text" size="15" id="txt4" placeholder="Text 4" />
    <br /><input type="radio" name="Type" value="Member" checked />Member
    <br /><input type="radio" name="Type" value="Guest" />Guest
    <br /><input type="radio" name="Type" value="Intruder" />Intruder
    <br /><input type="button" value="submit" id="btn1" />
    <br /><img id="img1" src="" alt="img1" width="300" />
  </div>
  <div id="resp" style="display:none;">
    <h1>Response</h1>
    <p>Your data has been received.</p>
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function() {
        $('#btn1').click(validate);
        $('#txt4').val('');
        $('#txt3').val('');
        $('#txt2').val('');
        $('#txt1').val('')
        google.script.run
          .withSuccessHandler(setURL)
          .getURL();
      });
      function setURL(url)
      {
        $('#img1').attr('src',url[0]);
      }
      function setResponse(a)
      {
        if(a)
        {
          $('#data').css('display','none');
          $('#resp').css('display','block');
        }
      }

      function validate()
      {
        var txt1 = document.getElementById('txt1').value || '';
        var txt2 = document.getElementById('txt2').value || '';
        var txt3 = document.getElementById('txt3').value || '';
        var txt4 = document.getElementById('txt4').value || '';
        var type = $('input[name="Type"]:checked').val();
        var a = [txt1,txt2,txt3,txt4,type];
        if(txt1 && txt2 && txt3 && txt4)
        {
          google.script.run
            .withSuccessHandler(setResponse)
            .getData(a);
            return true;
        }
        else
        {
          alert('All fields must be completed.');
        }
      }

      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }

      function radioValue()
      {
        var radios = document.getElementsByName('genderS');
        for (var i = 0, length = radios.length; i < length; i++) 
        {
          if(radios[i].checked) 
          {
            return radios[i].value;
          }
        }
      }


     console.log('My Code');
   </script>
  </body>
</html>

【讨论】：