使用App文件,使用HTML文件使用Textbox for Query查询Google电子表格

时间:2015-07-14 15:19:32

标签: javascript html database google-apps-script google-sheets

我有一个电子表格,我有超过1000行,每列都是一个字段,其中一列有名为Domain的字段,“这将是我需要查询的值”,我的应用程序使用HTML将需要查询使用文本框将HTML转换为函数,搜索电子表格并返回HTML中相同行的值。

现在这里是HTML代码:

<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

    <?!= include('WebPage.js'); ?>
    <?!= include('Style'); ?>
  </head>
  <body ng-app="webApp">
    <div ng-controller="webAppCtrl">
      <div>
        <md-toolbar class="md-theme-light">
          <div class="md-toolbar-tools">
            <div>DeLight App</div>
          </div>
        </md-toolbar>
    <div id="body">
    <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
      <div>
        <form action="#">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="sample3" />
            <label class="mdl-textfield__label" for="sample3">Enter Domain</label>
          </div>
        </form>
      </div>
    </div>
   <div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
     <div id="leftContainer" class="md-whiteframe-z2" flex="50">
       <md-toolbar class="md-theme-light">
         <div class="md-toolbar-tools">
           <div>Customer Info</div>
         </div>
       </md-toolbar>
       Pull Customer Info here from Sheet
     </div>
     <div id= "rightContainer" class="md-whiteframe-z2" flex="50">
       <md-toolbar class="md-theme-light">
         <div class="md-toolbar-tools">
           <div>Task List</div>
         </div>
       </md-toolbar>
       <md-list-item>
         <p>Verified Domain Owner</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
       <md-list-item>
         <p>User Creation</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
       <md-list-item>
         <p>Dual Delivery</p>
         <md-checkbox class="md-secondary"></md-checkbox>
       </md-list-item>
     </div>
   </div>
     </div>
      </div>
    </div>
  </body>
</html>

以下是Web App Function Scripts页面:

function doGet(e) {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Test')
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

function testSheet(){
  var ss = SpreadsheetApp.openById("abc123456");
  Logger.log(ss.getName());
}

我遇到的问题是我不知道如何存储用户提交给文本框的信息,以便稍后我可以使用我在此处找到的片段搜索我的电子表格:

function test(){
 var sh = SpreadsheetApp.openById("abc123456");
 var data = sh.getDataRange().getValues(); // read all data in the sheet
 for(n=0;n<data.length;++n){ // iterate row by row and examine data in column A
 if(data[n][0].toString().match('searchvariable')=='searchvariable'){ data[n][5] = 'YES'};// if column A contains 'xyz' then set value in index [5] (is column F)
 }
 Logger.log(data)
 sh.getRange(1,1,data.length,data[0].length).setValues(data); // write back to the sheet
 }

任何想法我怎样才能做到这一点?

谢谢

1 个答案:

答案 0 :(得分:0)

您需要从表单中获取数据,然后使用.gs将表单值发送到服务器端google.script.run.myFunctionName()脚本函数。

google.script.run - Client Side API

您可以通过多种方式从输入字段中获取值。您可以将表单作为一个整体获取,并将修改后的表单对象发送到服务器,也可以单独获取值。

如果您获得表单对象,则谷歌会更改表单对象。 .gs函数可以从表单对象中获取值的 方式是使用HTML name属性。换句话说,使表单对象策略起作用的唯一方法是为每个输入字段赋予一个带名称的name属性。

<input name='myNameGoesHere' class="mdl-textfield__input" type="text" id="sample3" />

Google文档显示将google.script.run代码直接放入输入按钮的click属性中。您可以这样尝试,或将代码放入单独的脚本标记中。

<input type="button" value="Not Clicked"
    onclick="google.script.run
        .withSuccessHandler(updateButton)
        .withUserObject(this)
        .getEmail()" />

HTML code:

<script>
  //Put an anonymous function into the browsers window object
  window.callServer = function(theFormObject) {
    google.script.run
     .search(theFormObject);
</script> 

<form>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input name='domain' class="mdl-textfield__input" type="text" id="sample3" />
    <label class="mdl-textfield__label" for="sample3">Enter Domain</label>
    <input type="button" value="Not Clicked" onclick="callServer(this.parent.parent)"/>
  </div>
</form>

Code.gs

function search(myForm) {
  //Look in VIEW menu, and LOGS menu Item to see if the form was passed in
  Logger.log('myForm: ' + myForm);
  var domain = myForm.domain;
  Logger.log('domain: ' + domain);
}