如何将电子表格中的值发送到使用HtmlService创建的用户界面

时间:2016-07-01 15:15:47

标签: google-apps-script

早上好,

我创建了一个html表单来更改Google电子表格中的值。 我能够做到这一点,但我希望表单能够预先提交电子表格中的一些值。 我不知道该怎么做。 我没有太多的编程经验,所以如果有人能帮助我,我将非常感激。

以下是我正在使用的代码

GS档案:

    function editDadosPessoais() {
    var ss = SpreadsheetApp.getActiveSpreadsheet(),
        html = HtmlService.createHtmlOutputFromFile('DadosPessoais')
    ss.show(html);
}

HTML文件:

 <html>
     <head>
      <meta content="Sheets" name="generator" />
       <style type="text/css"><!--br {mso-data-placement:same-cell;}
       .auto-style3 {
        font-family: Calibri;
       }
       .auto-style4 {
        font-family: Calibri;
        text-decoration: underline;
       }
       .auto-style5 {
        text-decoration: underline;
       }
       --></style>
      <meta content="pt-br" http-equiv="Content-Language" />
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
      <title>Untitled 1</title>
     </head>
     <body>
      <form name="DadosPessoais" action="" method="post" style="width: 473px; height: 454px" onsubmit="formSubmit(this)">
        <strong><span class="auto-style4">NOME:</span></strong><span class="auto-style3"><strong>&nbsp;
        </strong></span><strong>
        <input class="auto-style3" name="Name1" id="Name1" style="width: 382px" type="text"/><br />
        <br class="auto-style3" />
        <span class="auto-style3"><span class="auto-style5">CÓDIGO DEPENDENTE:</span>
        </span><select class="auto-style3" name="Dep1" id="Dep1" style="width: 76px">
        <option>Titular</option>
        <option>Esposo(a)</option>
        <option>Filho(a)</option>
        <option>Outro(a)</option>
        </select><br />
        <br class="auto-style3" />
        <span class="auto-style3"><span class="auto-style5">TELEFONES:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="auto-style5">SITUAÇÃO: </span></span>
        <br class="auto-style3" />
        <input class="auto-style3" name="Tel1" id="Tel1" type="text"/><span class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span><select class="auto-style3" name="SitTel1" id="SitTel1" style="width: 97px">
        <option></option>
        <option>CORRETO</option>
        <option>ERRADO</option>
        </select><br class="auto-style3" />
        <input class="auto-style3" name="Tel2" id="Tel2" type="text"/><span class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span><select class="auto-style3" name="SitTel2" id="SitTel2" style="width: 97px">
        <option></option>
        <option>CORRETO</option>
        <option>ERRADO</option>
        </select><br class="auto-style3" />
        <input class="auto-style3" name="Tel3" id="Tel3" type="text" /><span class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span><select class="auto-style3" name="SitTel3" id="SitTel3" style="width: 97px">
        <option></option>
        <option>CORRETO</option>
        <option>ERRADO</option>
        </select><br />
        <br class="auto-style3" />
        <span class="auto-style3"><span class="auto-style5">EMAIL:</span> </span>
        <input class="auto-style3" name="Email1" id="Email1" style="width: 329px" type="text" /><br />
        <br class="auto-style3" />
        <span class="auto-style4">ENDEREÇO:<br />
        </span><br class="auto-style4" />
        <span class="auto-style3">Logradouro: </span>
        <input class="auto-style3" name="Log1" id="Log1" style="width: 271px" type="text" /><span class="auto-style3">&nbsp;&nbsp;&nbsp; 
        nº: </span>
        <input class="auto-style3" name="Number1" id="Number1" style="width: 59px" type="text" /><span class="auto-style3"><br />
    &nbsp;&nbsp;&nbsp; <br />
        Complemento: </span>
        <input class="auto-style3" name="Comp1" id="Comp1" style="width: 91px" type="text" />&nbsp;&nbsp;&nbsp;
        <span class="auto-style3">Bairro: </span>
        <input class="auto-style3" name="Bairro1" id="Bairro1" style="width: 197px" type="text" /><span class="auto-style3">
        <br />&nbsp;&nbsp; <br />
        Cidade: </span>
        <input class="auto-style3" name="Cid1" id="Cid1" style="width: 276px" type="text" /><span class="auto-style3">&nbsp;&nbsp;&nbsp; 
        Estado: </span>
        <select class="auto-style3" name="Estado1" id="Estado1" style="width: 55px">
        <option></option><option>AC</option><option>AL</option><option>AP</option><option>AM</option><option>BA</option><option>CE</option><option>DF</option><option>ES</option><option>GO</option><option>MA</option><option>MG</option><option>MS</option><option>MT</option><option>PA</option><option>PB</option><option>PE</option><option>PI</option><option>PR</option><option>RJ</option><option>RN</option><option>RO</option><option>RR</option><option>RS</option><option>SC</option><option>SE</option><option>SP</option><option>TO</option>
        </select><br class="auto-style3" />
        <br class="auto-style3" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <div>
       <input type="submit" class="button redButton" value="Submit">
       </div>
      </form>
      <script type="text/javascript">
       function formSubmit(argTheFormElement) {
        google.script.run
         .withFailureHandler(myFailureFunction)
         .withSuccessHandler(google.script.host.close)
         .getValuesFromForm(argTheFormElement);
        }
       function myFailureFunction(argError) {
        alert("There was an error: " + argError.message);
        google.script.host.close();
        }
      </script>
     </body>
    </html>

2 个答案:

答案 0 :(得分:2)

将scriptlet放入输入字段的value属性设置。

目前:

<input class="auto-style3" name="Name1" id="Name1" style="width: 382px" type="text"/>

应该是:

<input class="auto-style3" name="Name1" id="Name1" 
  style="width: 382px" type="text" value="<?!= theFunctionNameHere() ?>"/>

服务器代码:

function theFunctionNameHere() {
  return "testing";
};

显示对话框的功能必须为createTemplateFromFile().evaluate()

function editDadosPessoais() {
  var html = HtmlService.createTemplateFromFile('the_HTML_file_name')
    .evaluate()
    .setWidth(640).setHeight(460)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Input Form');
};

答案 1 :(得分:0)

为了做到这一点,你想做几个简单的步骤。

A)使用您选择的ID的空标记制作HTML页面。

<div id='custom> </div>

B)在你的脚本标签中,创建一个在打开时触发的功能,AKA不要将其作为一个功能包装。

<script>
  google.script.run ...
</script>

这将自动启动,因为它没有功能容器。

C)然后在.gs文件中创建google.script.run函数以返回所需的默认值。并使用成功处理程序在脚本中运行它,将返回的数据指向您的html标记。

<script>
  google.script.run
    .withSuccessHandler( function(returnedData) {
       document.getElementById('customId').innerHTML = returnedData;
    })
  .yourCustomGSFunction();
</script>

D)全部完成。