How to call function from server in Google Apps Script?

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.

Only the Jquery datepicker, it's not relevant for what we're trying to achieve. — user882670
– user882670, Commented Dec 10, 2014 at 21:59

Mogsdad · Accepted Answer · 2014-12-10 22:06:57Z

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.

edited Dec 10, 2014 at 22:06

answered Dec 10, 2014 at 15:12

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user882670 Over a year ago

I now have throw new Error( "Optional message" ); instead of return false; I've corrected html like: google.script.run .withSuccessHandler(google.script.host.close) .withFailureHandler(function(){alert("io")}) .processF(form); But this is closing the sidebar even when the user clicks "No"

Mogsdad Over a year ago

Please update your question with enough code to reproduce the problem. I can keep posting examples that work, but since you're doing something different, it's not helping you.

user882670 Over a year ago

I really need the confirmation on the server side, because it is necessary to check the status of the spreadsheet - name and number of sheets, etc. - before it is called. I appreciate your time and effort spent on this issue!

Collectives™ on Stack Overflow

How to call function from server in Google Apps Script?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related