es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Puedo usar la barra lateral de HTML para llamar una función en Google Appscript?

28 Jul, 2023 Programación

Necesito usar una barra lateral para obtener algunas variables e imprimirlas en la última línea de una hoja, usando AppScript. Así que intenté usar este código:

Sidebar.HTML

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <p>Name: <input type="text" name="txtName"></p>
  <p>Date: <input type="text" name="txtDate"></p>
  <p>Value: <input type="text" name="txtValue"></p>
  <button onclick="doSomething()"> submit </button>
  <script>
    function doSomething() {
      google.script.run.withFailureHandler(myFunction(document.getElementById("txtName").value,
        document.getElementById("txtDate").value,
        document.getElementById("txtValue").value))
    }
  </script>

</body>

</html>

Code.js

function myFunction(name = "", date = "", value = "") {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName("1");

  var lr = sheet.getLastRow() + 1;

  sheet.getRange(lr, 1).setValue(name);
  sheet.getRange(lr, 2).setValue(date);
  sheet.getRange(lr, 3).setValue(value);
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile("Sidebar");
  html.setTitle("Form");
  SpreadsheetApp.getUi().showSidebar(html);
}

Pero no funcionó. Cuando hago clic en el botón no sucede nada. Soy nuevo en HTML, ¿qué puedo hacer para solucionarlo?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el código, se deben realizar algunos cambios.

    Sidebar.HTML
    – En la función doSomething(), se debe cambiar google.script.run.withFailureHandler() por google.script.run.withSuccessHandler().
    – Se debe cambiar myFunction(document.getElementById("txtName", "txtDate", "txtValue").value) por myFunction(document.getElementsByName("txtName")[0].value, document.getElementsByName("txtDate")[0].value, document.getElementsByName("txtValue")[0].value) para obtener los valores de los campos de entrada.

    Code.js
    – lr debería declararse como una variable let o const.
    – La función openDialog() debería modificarse para agregar un elemento de menú o botón a la hoja de cálculo para ejecutar la función. El método showSidebar() solo puede ser llamado por una acción del usuario, como hacer clic en un botón o elemento de menú.

    Aquí está el código corregido:

    Sidebar.HTML

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Nombre: <input type="text" name="txtName">
    Fecha: <input type="text" name="txtDate">
    Valor: <input type="text" name="txtValue">
    <button onclick="doSomething()">Enviar</button>
    <script>
      function doSomething() {
        google.script.run.withSuccessHandler(function() {
          google.script.host.close();
        }).myFunction(document.getElementsByName("txtName")[0].value, document.getElementsByName("txtDate")[0].value, document.getElementsByName("txtValue")[0].value);
      }
    </script>
  </body>
</html>

    Code.js

    function myFunction(name = "", date = "", value = "") {
  const ss = SpreadsheetApp.getActive();
  const sheet = ss.getSheetByName("1");
  const lr = sheet.getLastRow() + 1;

  sheet.getRange(lr, 1).setValue(name);
  sheet.getRange(lr, 2).setValue(date);
  sheet.getRange(lr, 3).setValue(value);
}

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu("Formulario").addItem("Abrir Diálogo", "openDialog").addToUi();
}

function openDialog() {
  const html = HtmlService.createHtmlOutputFromFile("Sidebar");
  html.setTitle("Formulario");
  SpreadsheetApp.getUi().showSidebar(html);
}

    La función onOpen() agrega un elemento de menú a la hoja de cálculo que ejecuta la función openDialog() para mostrar la barra lateral.

Comments are closed.