Google doc HTML Service sidebar to get info from spreadsheet

Question

I'm trying to build a user interface in html service available directly in a doc, in this sidebar i have a form with an input text, that when i submit it retrieved information from sheet for that numberID. It's quite easy to display and to submit form by following the google tutorial. But, i have a problem. After retrieving information for numberID want to create new paragraph in doc with that info. I saw they changed the "google.script.run" for "google.script.host" I tried to

here my sample code: Script code: /** * Crea una entrada de menú en la interfaz de Google Docs UI cuando se abre el documento. */ function onOpen(e) { DocumentApp.getUi().createAddonMenu() .addItem('Inicio', 'showSidebar') .addToUi(); }

/**
 * Se ejecuta cuando el add-on se instala.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Abre una ventana lateral en el documento con el interfaz de usuario del     complemento (addon).
 */
 function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('Generar ficha empleado')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
      /* .setWidth(400); // se puede poner un tamaño de addon */
  DocumentApp.getUi().showSidebar(ui);
}

/**
 * Retrieve info from sheet
 */
function getInfo(id) {
  var sheet =     SpreadsheetApp.openById('SHEET_ID').getSheetByName('categories');
  var data = sheet.getDataRange().getValues();
  var myArray = [];
  for (var i = 0; i < data.length; i++) {
    if (id == data[i][0]) {
      for (j=0; j<data[i].length; j++) {
        myArray.push(data[i][j]);
      } // end for j
    } // end if
  }
  Logger.log(myArray);
  return myArray;
}

/**
 * Insert new paragraph with parameter 
 */
function createDocument(iData) {

   var doc = DocumentApp.getActiveDocument();
   var body = doc.getBody();
  // Access the body of the document, then add a paragraph.
  doc.getBody().appendParagraph('Datos de entrada');

  table = body.appendTable(iData);
  table.getRow(0).editAsText().setBold(true);
}

Html code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <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>
    .branding-below {
      bottom: 56px;
      top: 0;
    }

    .branding-text {
      left: 7px;
      position: relative;
      top: 3px;
    }

    .col-contain {
      overflow: hidden;
    }

    .logo {
      vertical-align: middle;
    }

    .radio-spacer {
      height: 20px;
    }

    .width-100 {
      width: 100%;
    }
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form id="myform">

        <div class="block form-group">
          <label for="translated-text"><b>Buscar usuarios</b></label>
          <input type="text" class="width-100" id="user-text" rows="10"/>
        </div>

       <div class="block" id="button-bar">
          <button class="blue" id="run-translation">Insertar</button>
          <!--<button id="insert-text">Insert</button>-->
          <button id="borrar-form">Borrar</button>
        </div>
      </form>
    </div>

    <div id="infoDiv" class="sidebar bottom">
      <img alt="Add-on logo" class="logo" src="https://googledrive.com/host/0B0G1UdyJGrY6XzdjQWF4a1JYY1k/translate-logo-small.png" width="27" height="27">
      <span class="gray branding-text">Crear Plantilla</span>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>

    $('#myform').submit( function(e) {
        // Evita que la app sirva una nueva página después del submit
        e.preventDefault();

        var theID = $('#user-text').val();


      function onSuccess(info) {
        var div = document.getElementById('infoDiv');
        div.innerHTML = 'Usuario: ' + info ;
        <--- createDocument(info); -->
      }
      function onError(error) {
        var div = document.getElementById('infoDiv');
        div.innerHTML = 'ERROR: ' + error.message;
      }
     google.script.run
            .withSuccessHandler(onSuccess)
            .getInfo(theID);
             <--- createDocument(info); -->

});

     </script>
  </body>
</html>

I dont´t know how to create document with the info from sheet. Where and How i can call the function createDocument ?

google.script.run is alive and well. where did you get that "it was changed to google.script.host" ? — Zig Mandel

Marcos Rodriguez Marcos Rodriguez · Accepted Answer · 2016-05-27T07:52:29

I got it, i solved it like this:

the fasted solution for me is just adding a new google.script.run into de onSuccessRead event, as shown in the next code:

 /**
     * Evento submit del formulario 
     */
    $('#myform').submit( function(e) {
        // Evita que la app sirva una nueva página después del submit
        e.preventDefault();

        var theID = $('#user-text').val();


      function onSuccessRead(info) {

        var div = document.getElementById('infoDiv');
        div.innerHTML = 'Usuario: ' + info[0] + ' <br> Nombre: ' + info[1] + ' <br> Area: ' + info[2] + ' <br> Email: ' + info[3] ;

        // ejecutamos la funcion para escribir en el doc la informacion recuperada.
       google.script.run
            .withSuccessHandler()
            .withFailureHandler()
            .createDocument(info);
      }

      function onErrorRead(error) {
        var div = document.getElementById('infoDiv');
        div.innerHTML = 'ERROR: ' + error.message;
      }

     // ejecutamos la función de obtener la informacion del cliente
     google.script.run
            .withSuccessHandler(onSuccessRead)
            .withFailureHandler(onErrorRead)
            .getInfo(theID);
     Logger.log(info[3]);

     // ejecutamos la funcion para escribir en el doc la informacion recuperada.
     //google.script.run
       //     .withSuccessHandler()
         //   .withFailureHandler()
           // .createDocument(nombre);

});

Google doc HTML Service sidebar to get info from spreadsheet

1 Answers