早上好,
我创建了一个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>
</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>
<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">
</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">
</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">
</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">
nº: </span>
<input class="auto-style3" name="Number1" id="Number1" style="width: 59px" type="text" /><span class="auto-style3"><br />
<br />
Complemento: </span>
<input class="auto-style3" name="Comp1" id="Comp1" style="width: 91px" type="text" />
<span class="auto-style3">Bairro: </span>
<input class="auto-style3" name="Bairro1" id="Bairro1" style="width: 197px" type="text" /><span class="auto-style3">
<br /> <br />
Cidade: </span>
<input class="auto-style3" name="Cid1" id="Cid1" style="width: 276px" type="text" /><span class="auto-style3">
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" />
<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>
答案 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)全部完成。