Como introducir datos con un popup con Google Apps Script

Google Apps Script Google Sheets Web GUI HTML5

En ocasiones puede resultar muy útil usar Google Apps Script a fin de simplificar la introducción de datos en nuestros spreadsheets.

Gracias a Google Apps Scripts podemos generar un popup con los campos que necesitemos que ingresen la información que queramos en las casillas que necesitemos.

El ejemplo que aquí os muestro es muy sencillo, solo pide el nombre y el apellido y lo registra en la hoja de cálculo pero con pocas modificaciones podréis tenerlo listo para trabajar como lo necesitáis.

El popup no es más que una pequeña web que se comunica con el Google Apps Script y le da la información que ha de procesar.

Aquí os dejo el código:

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function Register()
      {
        var Nombre    = document.getElementById("Nombre").value;
        var Apellido  = document.getElementById("Apellido").value;
        google.script.run.withSuccessHandler(Done).Register( Nombre, Apellido );
      }

      function Done()
      {
           document.getElementById("container").innerHTML = "<p> PROCESO FINALIZADO </p>";
      }
    </script>  
  </head>
  <body>
     <div id="container">
       <h1>Introducir datos</h1>
       <p><input type="text" id="Nombre"   value="" placeholder="Nombre"></p>
       <p><input type="text" id="Apellido" value="" placeholder="Apellido"></p>
       <button onclick="Register()"> Registrar </button>
     </div>
  </body>
</html>

Code.gs

function onOpen()
{
  SpreadsheetApp.getUi().createMenu("SCRIPT")
          .addItem("ShowPopup","ShowPopup")
          .addToUi();
}

function ShowPopup()
{
  var html = HtmlService.createHtmlOutputFromFile('index').setWidth(300).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html,"Entrada de datos");
}

function Register( Nombre, Apellido )
{
  var row = new Array();
  row.push(Nombre);
  row.push(Apellido);

  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().appendRow(row);
}

Tutoriales Google Apps Scripts

Como introducir datos con un popup con Google Apps Script

1 comentario:

Tal vez te interese