Google文档HTML服务侧边栏,可从电子表格中获取信息

时间:2016-05-25 09:27:54

标签: google-apps-script

我正在尝试在文档中直接提供html服务中构建用户界面,在这个侧边栏中我有一个带有输入文本的表单,当我从表单中提取该numberID时检索到的信息。按照谷歌教程显示和提交表单非常容易。 但是,我有一个问题。 检索numberID信息后,想要在doc中创建具有该信息的新段落。 我看到他们为“google.script.host”更改了“google.script.run”我试图

这里是我的示例代码: 脚本代码:         / **      * Crea una entradademenúenla 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代码:

<!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>

我不知道如何使用工作表中的信息创建文档。 我在哪里以及如何调用函数createDocument?

1 个答案:

答案 0 :(得分:1)

我明白了,我解决了这个问题:

对我来说,禁食的解决方案只是在de onSuccessRead事件中添加一个新的google.script.run,如下一个代码所示:

 /**
     * 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);

});