How to communicate between HtmlService Javascript and Server Google Apps Script

Question

I'd like to create my first Google Docs Script to generate an amount but it seems not working well like this :

function onOpen(e) {
    DocumentApp.getUi().createAddonMenu()
        .addItem('Start', 'showSidebar')
        .addToUi();
}

function onInstall(e) {
    onOpen(e);
}

function showSidebar() {
    var ui = HtmlService.createHtmlOutputFromFile('Sidebar').setTitle('Calcul tarification Icecom');
    DocumentApp.getUi().showSidebar(ui);
}

function calculPrice(compagnyType, hours) {
  // here I'm not able to get "compagnyType" and "hours"
  var pricePerDay = 300;
  switch (compagnyType) {
    case 'PME':
      pricePerDay = 350;
      break;
    case 'ESI':
      pricePerDay = 400;
      break;
    case 'GE' :
      pricePerDay = 450;
      break;
  }
  return pricePerDay * hours;
}

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->

<style></style>

<div class="sidebar branding-below">
  <form>
    <div class="block col-contain">
      <div class="col-one">
        <label for="compagnyType">Type de l'entreprise</label>
        <select id="compagnyType" name="compagnyType">
          <option>TPE</option>
          <option>PME</option>
          <option>ESI</option>
          <option>GE</option>
        </select>
      </div>
    </div>
    
    <div class="block form-group">
      <label for="hours"><b>Nombre d'heures</b></label>
      <input type="text" id="hours" name="hours"/>
    </div>

   <div class="block" id="button-bar">
      <button class="blue" id="calculPrice">Calculer</button>
    </div>
  </form>
  <div id="result"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
  $(function() {
    $('#calculPrice').click(calculPrice);
  });
  function calculPrice() {
    var compagnyType = $('select[name=compagnyType]').val();
    var hours = $('input[name=hours]').val();
    var result = google.script.run.calculPrice(compagnyType, hours);
    $('#result').text(result);
  }
</script>

Mogsdad · Accepted Answer · 2015-05-29 13:31:26Z

A quick test demonstrates that you are receiving your parameters in calculPrice():

function calculPrice(compagnyType, hours) {
  Logger.log(JSON.stringify(arguments));
  ...

Log contains:

[15-05-29 09:09:21:770 EDT] {"0":"TPE","1":"23"}

Since the information is moving from the client side to the server side properly, let's look at the opposite direction. First, validate that your server function does return a value upon success... and it does. Here's the code that's expected to receive it on the client side:

var result = google.script.run.calculPrice(compagnyType, hours);
$('#result').text(result);

It's expecting to set result with the return value of google.script.run.... Check the documentation for run, and you'll find that there is no return code. The way that the API works is through a call-back function. Unlike a function call that has a synchronous response, a call-back gets a response asynchronously, some time after the API call, by sending it as a parameter to another client-side function that you provide. In your html/javascript you should have:

...
google.script.run
      .withSuccessHandler(showResult)   // response goes to this function
      .calculPrice(compagnyType, hours);

and add

// Function to receive asynchronous response
function showResult( result ) {
  $('#result').text(result);   // << Here is where we display the result
}

function onOpen(e) {
    DocumentApp.getUi().createAddonMenu()
        .addItem('Start', 'showSidebar')
        .addToUi();
}

function onInstall(e) {
    onOpen(e);
}

function showSidebar() {
    var ui = HtmlService.createHtmlOutputFromFile('Sidebar').setTitle('Calcul tarification Icecom');
    DocumentApp.getUi().showSidebar(ui);
}

function calculPrice(compagnyType, hours) {
  // here I'm not able to get "compagnyType" and "hours"
  var pricePerDay = 300;
  switch (compagnyType) {
    case 'PME':
      pricePerDay = 350;
      break;
    case 'ESI':
      pricePerDay = 400;
      break;
    case 'GE' :
      pricePerDay = 450;
      break;
  }
  return pricePerDay * hours;
}

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->

<style></style>

<div class="sidebar branding-below">
  <form>
    <div class="block col-contain">
      <div class="col-one">
        <label for="compagnyType">Type de l'entreprise</label>
        <select id="compagnyType" name="compagnyType">
          <option>TPE</option>
          <option>PME</option>
          <option>ESI</option>
          <option>GE</option>
        </select>
      </div>
    </div>
    
    <div class="block form-group">
      <label for="hours"><b>Nombre d'heures</b></label>
      <input type="text" id="hours" name="hours"/>
    </div>

   <div class="block" id="button-bar">
      <button class="blue" id="calculPrice">Calculer</button>
    </div>
  </form>
  <div id="result"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
  $(function() {
    $('#calculPrice').click(calculPrice);
  });
  function calculPrice() {
    var compagnyType = $('select[name=compagnyType]').val();
    var hours = $('input[name=hours]').val();
    google.script.run
          .withSuccessHandler(showResult)   // response goes to this function
          .calculPrice(compagnyType, hours);
  }

  // Function to receive asynchronous response
  function showResult( result ) {
    $('#result').text(result);   // << Here is where we display the result
  }
</script>

Collectives™ on Stack Overflow

How to communicate between HtmlService Javascript and Server Google Apps Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related