Google apps script 如何在Google脚本HTML web应用程序中创建时间表仪表板_Google Apps Script

Google apps script 如何在Google脚本HTML web应用程序中创建时间表仪表板

google-apps-script

Google apps script 如何在Google脚本HTML web应用程序中创建时间表仪表板,google-apps-script,Google Apps Script,我试图在谷歌脚本HTML网页应用程序中创建一个仪表板，数据由用户组成，分配的项目和在项目上花费的总时间我使用了一些HTML代码，但是它变得混乱了，共享了google表单，其中包含我想在web应用程序中复制这些数据的数据。我在这里查看的函数是“日期选择器”“用户名/项目名称”是搜索参数仪表板应根据搜索参数进行反映，数据应包括用户的总工作时间或用户在项目上花费的总小时数我知道这有点复杂，如果你参考我的工作表，你会对我希望在web应用程序中发布的内容有所了解函数doGet（）{ 返回Htm

我试图在谷歌脚本HTML网页应用程序中创建一个仪表板，数据由用户组成，分配的项目和在项目上花费的总时间

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

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

我知道这有点复杂，如果你参考我的工作表，你会对我希望在web应用程序中发布的内容有所了解

函数doGet（）{
返回HtmlService
.createTemplateFromFile（'索引'）
.评估（）；
}
函数getData（）{
返回电子表格应用程序
.openById（'1xrzcl0hnfmkoecytosdgv2kffdalcdfe0ildf-'u Re4'）
.getSheetByName（'Sheet4'）
.getDataRange（）
.getValues（）；
}
函数getData1（）{
返回电子表格应用程序
.openById（'1xrzcl0hnfmkoecytosdgv2kffdalcdfe0ildf-'u Re4'）
.getSheetByName（“Sheet5”）
.getDataRange（）
.getValues（）；
}
函数getData2（）{
返回电子表格应用程序
.openById（'1xrzcl0hnfmkoecytosdgv2kffdalcdfe0ildf-'u Re4'）
.getSheetByName（'Sheet6'）
.getDataRange（）
.getValues（）；
}
函数getData3（）{
返回电子表格应用程序
.openById（'1xrzcl0hnfmkoecytosdgv2kffdalcdfe0ildf-'u Re4'）
.getSheetByName（“Sheet7”）
.getDataRange（）
.getValues（）；
}


引导示例
/*为页脚添加灰色背景色和一些填充*/
页脚{
背景色：#F2F2；
填充：25px；
}
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
最小高度：200px；
}
}
}










用户名
日期范围选择器


今日报道
用户名
总工作时间

项目名称
用户名
总工作时间
测试1
A.
12:00:00
测试2
B
11:00:00
测试3
C
10:00:00

月报
用户名
总工作时间

项目名称
用户名
总工作时间
测试1
A.
122:00:00
测试2
B
211:00:00
测试3
C
190:00:00

这是一个简单的html文件，与电子表格中包含的Google Apps脚本进行通信。我经常将它作为一个对话框进行测试，也将它作为一个web应用程序运行。html文件和Google应用程序脚本相互通信，我将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;
}

函数doGet（）
{
var html=HtmlService.createHtmlOutputFromFile（'index'）；
返回html.setXFrameOptionsMode（HtmlService.XFrameOptionsMode.ALLOWALL）
}
函数getData（a）
{
var ts=Utilities.formatDate（新日期（），“GMT-6”，“M/d/yyyy”“HH:mm:ss”）；
a、 拼接（0,0，ts）；
var ss=SpreadsheetApp.openById（'SPREADSHEETID'））
ss.getSheetByName（'Form Responses 1'）。附录行（a）；
返回true；
}
函数getURL（）
{
var ss=SpreadsheetApp.openById（'SPREADSHEETID'）；
var sht=ss.getSheetByName（'imgURLs'）；
var rng=sht.getDataRange（）；
var rngA=rng.getValues（）；
var urlA=[]；
对于（var i=1；i
<!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>