How to call function from server in Google Apps Sc

Question

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.

Answer 1

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.