我正在使用GAS在google电子表格的侧边栏中嵌入表单。
如何在用户提交并确认表单后关闭此侧栏?
在将数据发送到服务器之前完成验证。之后,用户必须确认他想要使用是/否警告框提交表单。
如果他点击是: 侧边栏关闭,数据已提交
如果他点击否: 侧栏保持打开状态,没有任何反应。
在code.gs中:
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Test')
.addItem('New Test', 'showSidebar')
.addToUi()
}
function include (file) {
return HtmlService.createTemplateFromFile(file).evaluate().getContent();
}
function showSidebar() {
var html = HtmlService.createTemplateFromFile('Page')
.evaluate()
.setTitle('Sidebar')
.setWidth(200);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function processF(form){
var ui = SpreadsheetApp.getUi();
var result = ui.alert(
'Please confirm',
ui.ButtonSet.YES_NO);
if (result == ui.Button.YES) {
Browser.msgBox('Yes');
return true;
} else{
return false;
//throw new Error( "Optional message" );
}
}
在html中:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
function validar(){
try{
var form=document.getElementById('configs');
if(!document.getElementById('nome').value || !document.getElementById('datepicker').value){
return false;
} else {
this.disabled=true;
google.script.run
//.withFailureHandler(google.script.host.close)
.withSuccessHandler(function(closeTF){
if(closeTF==true){
google.script.host.close();
}
}).processF(form);
//google.script.host.close();
}
} catch(e){
alert('Erro: '+e.message);
}
};
</script>
<div class="painel">
<form id="configs" action="#">
<fieldset>
<label>Name</label>
<p><input type="text" name="nome" id="nome" minlength="2" required/></p>
<label>1-Choose date:</label>
<p><input type="text" name="datepicker" id="datepicker" required/></p>
<label>2-Choose:</label>
<p>
<select name="horizonte" id="horizonte">
<option value=1>1 Month</option>
<option value=2>2 Months</option>
<option value=3 selected="selected">3 Months</option>
<option value=6>6 Months</option>
</select>
</p>
<label>3-Choose:</label>
<p>
<select name="relatorio" id="relatorio">
<option value=1>Week</option>
<option value=2>Month</option>
</select>
</p>
<p>
<input type="submit" id="enviar" value="Submit" onclick="validar()" />
</p>
</fieldset>
</form>
</div>
<?!= include('Javascript'); ?>
使用此代码,无论用户是单击是还是否,侧边栏始终处于关闭状态。
答案 0 :(得分:2)
更新回答
感谢剩下的代码@NunoNogueira。我花了相当多的时间进行实验,我确信问题在于使用alert
。这可能与Issue 4428有关,但我不能确定。警报可能会覆盖某些窗口上下文信息。显而易见的是,服务器正在将undefined
返回到successHandler,因此它在客户端无用。我的建议是放弃使用alert
来完成这项工作。
如果您在验证表单前坚持要求确认,则可以在客户端使用confirm()
:
function validar(){
if (!confirm("Por favor, confirme")) return;
...
原始答案 - 正确的信息,但不是问题所在。
拨打return false
会触发successHandler
,因为它是return
。
要调用failureHandler
,服务器功能必须 FAIL 。而不是return
:
throw new Error( "Optional message" );
...然后在HTML代码中添加failureHandler
。