I'm using a GAS to embed a form in a sidebar in a google spreadsheet.
How do I close this sidebar after the form has been submitted and confirmed by the user?
The validation is done before sending the data to the server. After that, the user has to confirm he wants to submit the form with a Yes/No alert box.
If he clicks yes: The sidebar closes and the data is submitted
If he clicks no: The sidebar remains open and nothing happens.
In 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" );
}
}
In 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'); ?>
With this code, the sidebar is always closed, no matter if the user clicks Yes or No.
Updated answer
Thanks for the rest of the code, @NunoNogueira. I've spent considerable time experimenting with it, and I'm confident that the problem is with the use of the alert
. This might be related to Issue 4428 , but I can't be sure. It's likely that the alert is overriding some window context information. What is clear is that the server is returning undefined
to the successHandler, so it's useless on the client side. My recommendation is to abandon use of alert
for this work flow.
If you insist on having a confirmation before validating the form, you can use a confirm()
on the client:
function validar(){
if (!confirm("Por favor, confirme")) return;
...
Original answer - correct information, but not what the problem was.
The call to return false
will trigger the successHandler
, because it is a return
.
To invoke a failureHandler
instead, the server function must FAIL . Instead of a return
:
throw new Error( "Optional message" );
... then add a failureHandler
in your HTML code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.