Crea PDFs con HTML y CSS en AppSheet: Tutorial Completo con App Scripts y Bots de Automatización

Crea PDFs con HTML y CSS en AppSheet: Tutorial Completo con App Scripts y Bots de Automatización
AppSheetGoogle Apps Script

En este tutorial, aprenderás a dominar HTML y CSS para crear documentos dinámicos y profesionales. Te mostraremos cómo diseñar cotizaciones y citas médicas complejas, manejar campos dinámicos, relaciones entre tablas y automatizar el proceso con scripts y la ayuda de inteligencia artificial (Gemini y ChatGPT).

<<[Campo1]>>

Descarga los archivos que utilizaremos en este video: HTML, CSS, base de datos y scripts completos

Todos los archivos están organizados y listos para usar. Puedes donar cualquier monto si quieres apoyar mi trabajo. Así me ayudas a seguir creando contenido y tutoriales de calidad para ti.

Kit HTML/CSS y Script para Ticket de Citas y Formato de Cotización en AppSheet

Precio Sugerido: $3,49

Kit HTML/CSS y Script para Ticket de Citas y Formato de Cotización en AppSheet

Google Docs vs. HTML: La Verdadera Diferencia

Si has trabajado con PDFs en AppSheet, seguramente estás familiarizado con las plantillas de Google Docs. Si bien son útiles, tienen limitaciones en cuanto a diseño y flexibilidad. Al usar HTML, obtienes un control total sobre cada píxel de tu documento.

A continuación, te mostramos cómo se comparan las sintaxis para insertar datos:

Función Google Docs HTML
Campo Básico <<[Campo]>> &lt;&lt;[Campo]&gt;&gt;
Campo Referenciado <<[Producto].[Precio]>> &lt;&lt;[Producto].[Precio]&gt;&gt;
Sentencia IF <<IF([Descuento]="";"";[Descuento])>> &lt;&lt;IF([Descuento]="";"";[Descuento])&gt;&gt;

Tabla en Relación con Otra Tabla

La verdadera magia ocurre al trabajar con datos relacionados. Para mostrar una lista de productos en una cotización, por ejemplo, usas la misma sintaxis en ambas plantillas, pero con HTML tienes la libertad de diseñar la tabla a tu gusto.

A continuación, te mostramos cómo se comparan las sintaxis para insertar datos:

En Google Docs:


<<Start: [Related PRODUCTOSs]>>
<<[Campo1]>>
<<[Campo2]>>
<<[Campo3]>>
<<End>>

En HTML:


&lt;&lt;Start: [Related PRODUCTOSs]&gt;&gt;
&lt;&lt;[Campo1]&gt;&gt;
&lt;&lt;[Campo2]&gt;&gt;
&lt;&lt;[Campo3]&gt;&gt;
&lt;&lt;End&gt;&gt;

Ejemplo con una tabla en HTML:


<table class="product-table">
  <thead>
    <tr>
      <th>Campo número 1</th>
      <th>Campo número 2</th>
      <th>Campo número 3</th>
    </tr>
  </thead>
  <p>&lt;&lt;Start: [Related PRODUCTOSs]&gt;&gt;
  <tbody>
    <tr>
      <td>&lt;&lt;[Campo1]&gt;&gt;</td>
      <td>&lt;&lt;[Campo2]&gt;&gt;</td>
      <td>&lt;&lt;[Campo3]&gt;&gt;</td>
    </tr>
  </tbody>
  &lt;&lt;End&gt;&gt;</p>
</table>
  

Cómo Insertar Campos Básicos en HTML para un diseño PDF de AppSheet

El primer paso es entender la sintaxis. Para insertar cualquier dato de tu tabla de AppSheet en tu plantilla HTML, simplemente tienes que usar la notación &lt;&lt[NombreColumna]&gt;&gt;. No importa si es texto, números o una fecha, AppSheet lo sustituirá por el valor correspondiente en cada registro.

Puedes usar estos campos en cualquier parte de tu código HTML: dentro de párrafos, encabezados o celdas de tabla.

Cómo Crear un PDF con Diseño HTML con dos o más tablas

Aquí es donde el poder de HTML y las relaciones de AppSheet se combinan. Una cotización normalmente incluye los datos del cliente (una tabla) y una lista de productos o servicios (otra tabla).

  1. Datos del cliente: Inserta los campos básicos como el nombre de la empresa y la fecha de la cotización.

  2. Tabla de productos: Usa la sintaxis &lt;&ltStart: [Related_Productos]&gt;&gt; y &lt;&ltEnd&gt;&gt; para recorrer la lista de productos relacionados. En el bloque de código de tu tabla HTML, coloca una fila (<tr>) con los campos de cada producto, como &lt;&lt[NombreProducto]&gt;&gt; y &lt;&lt[Precio]&gt;&gt;. AppSheet repetirá esa fila por cada producto relacionado, creando la lista de forma automática.

Cómo poner un diseño HTML en AppSheet y generar PDFs | Paso a Paso

1️⃣ Crear el diseño HTML/CSS

  • Genera tu diseño completo de HTML y CSS usando la IA.

  • Asegúrate de que todo el código esté en un mismo archivo.

  • Este archivo será la base del PDF que generarás.

Cómo poner un diseño HTML en AppSheet y generar PDFs | Paso a Paso

2️⃣ Modificar los campos

  • Reemplaza los valores estáticos por los campos que quieres que se muestren en el PDF.

  • Por ejemplo, [CLIENTE], [ID], [TOTAL], etc.

Cómo poner un diseño HTML en AppSheet y generar PDFs | Paso a Paso

3️⃣ Configurar la tabla de datos

Agrega dos columnas nuevas:

    • COD → Tipo: Number

    • PDF → Tipo: File

Crea PDFs con HTML y CSS en AppSheet

4️⃣ Crear una acción

  • Tipo de acción: Data: set the values of some columns in this row.

  • Configura la acción para que:

    • COD se incremente en +1.

    • Nombre del PDF: siempre usando la carpeta + COD + extensión, ejemplo:


CONCATENATE("/ProformasPDFs/", [CLIENTE], "-", [ID], "-", [COD], ".pdf")  
  
Crea PDFs con HTML y CSS en AppSheet

5️⃣ Crear el Bot

  • Activación: Cuando se actualice la tabla.
  • Condición del Bot:


[_THISROW_BEFORE].[COD]<>[_THISROW_AFTER].[COD]
  
Crea PDFs con HTML y CSS en AppSheet

6️⃣ Crear el Proceso

  • Tipo de proceso: Run a Task

  • En settings: selecciona Create a new file.

  • Configura:

    1. HTTP Content type → HTML

    2. Template: Selecciona tu archivo HTML/CSS modificado

    3. Cambia HTTP Content type a PDF.

  • Configura la carpeta donde se guardará el PDF, ejemplo: /ProformasPDFs.

  • Configura el nombre del archivo, ejemplo:


CONCATENATE("/ProformasPDFs/", [CLIENTE], "-", [ID], "-", [COD], ".pdf")
  
Crea PDFs con HTML y CSS en AppSheet
Crea PDFs con HTML y CSS en AppSheet

7️⃣ Guardar y verificar

  • Revisa que el PDF se genere correctamente con los campos reemplazados.
  • Verifica que se guarde en la carpeta correcta de Google Drive con el nombre esperado.

  • El diseño del PDF debe coincidir con el HTML/CSS modificado con los campos necesarios.

Cómo crear un Script con IA para Generar PDFs con Diseño HTML/CSS a través de un Bot de AppSheet

La verdadera potencia de esta estrategia reside en la automatización. En lugar de generar cada PDF manualmente, puedes crear un bot en AppSheet que se active automáticamente y genere tu documento. Este proceso se inicia cuando un cambio específico ocurre en una columna, como COD en tu aplicación.

Cuando el bot se activa, llama a un script de Google Apps Script y le pasa los parámetros necesarios (ID, Cliente, Correo, etc.). El script toma estos datos, los combina con tu plantilla HTML y crea el PDF final en segundos, guardándolo en tu Google Drive.

Para ayudarte a crear este flujo, la inteligencia artificial es tu mejor socio. A continuación, te mostramos el prompt exacto que puedes usar con Gemini o ChatGPT para que generen el código del script y la plantilla.

Prompt para la IA


Quiero crear un script en Google Apps Script para generar PDFs desde un diseño HTML que ya tengo.
Este script será llamado desde un bot en AppSheet.
Necesito que el script y el HTML sean dos archivos separados: uno para el script (.gs) y otro para el HTML (proforma_template.html).
El script debe:
1.  Pedir los siguientes parámetros uno por uno: ID, CLIENTE, TELEFONO, CORREO, FECHA, TOTAL, COD.
2.  En base al ID recibido, recorrer la hoja llamada PROFORMA_DETALLE del libro de GOOGLESheet llamado HTML_APPSHEET. (Aquí debe de ir el Link de tu hoja de Google Sheets).
3.  La hoja PROFORMA_DETALLE tiene las columnas ID, ID_PROFORMA, PRODUCTO, PRECIO. El script debe traer todas las filas donde ID_PROFORMA coincida con el ID recibido.
4.  Insertar estos datos en el HTML para generar un PDF.
5.  Guardar el PDF en esta carpeta de Google Drive: (Aquí debe de ir el Link de tu carpeta de Google Drive).
Te paso el HTML que quiero usar (archivo separado proforma_template.html):

Aquí va tu diseño html css

Crea el script completo (archivo separado .gs) listo para que:
- Reciba los parámetros.
- Recorra la hoja PROFORMA_DETALLE filtrando por ID_PROFORMA = ID.
- Genere automáticamente el PDF con todos los productos.
- Lo guarde en la carpeta indicada.
  

Script de Google Apps Script

Este es el código que la IA generaría. Solo necesitas copiarlo, pegarlo en un archivo .gs en tu proyecto de Apps Script y editar las IDs de tus archivos y carpetas.


// Reemplaza con el ID de tu Google Sheet
const SPREADSHEET_ID = 'TU_ID_DEL_GOOGLE_SHEET';
// Reemplaza con el ID de la carpeta donde se guardarán los PDFs
const FOLDER_ID = 'TU_ID_DE_LA_CARPETA_EN_DRIVE';

/**
 * Genera un PDF de proforma usando una plantilla HTML.
 * @param {string} ID - ID de la proforma.
 * @param {string} CLIENTE - Nombre del cliente.
 * @param {string} TELEFONO - Teléfono del cliente.
 * @param {string} CORREO - Correo del cliente.
 * @param {string} FECHA - Fecha de la proforma.
 * @param {string} TOTAL - Total de la proforma.
 * @param {string} COD - Código de activación.
 */
function generarProformaPDF(ID, CLIENTE, TELEFONO, CORREO, FECHA, TOTAL, COD) {
  try {
    const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = spreadsheet.getSheetByName('PROFORMA_DETALLE');
    const data = sheet.getDataRange().getValues();

    // Filtra las filas que coinciden con el ID_PROFORMA
    const productos = data.filter(row => row[1] == ID).map(row => ({
      ID: row[0],
      ID_PROFORMA: row[1],
      PRODUCTO: row[2],
      PRECIO: row[3]
    }));

    // Carga la plantilla HTML
    const template = HtmlService.createTemplateFromFile('proforma_template');

    // Pasa los datos a la plantilla
    template.data = {
      CLIENTE: CLIENTE,
      TELEFONO: TELEFONO,
      CORREO: CORREO,
      FECHA: FECHA,
      TOTAL: TOTAL,
      productos: productos
    };

    // Genera el PDF
    const pdf = template.evaluate().getAs('application/pdf');
    pdf.setName(`Proforma_${ID}.pdf`);

    // Obtiene la carpeta de destino
    const folder = DriveApp.getFolderById(FOLDER_ID);
    // Guarda el PDF en la carpeta
    folder.createFile(pdf);

    Logger.log('PDF generado y guardado exitosamente.');

  } catch (error) {
    Logger.log('Error al generar el PDF: ' + error.toString());
  }
}
  
guest
0 Comentarios
más antiguo
El más nuevo Más votado
Comentarios en línea
Ver todos los comentarios

2026© Cursos Aspiazu | Hecho por Miguel Aspiazu

Scroll al inicio
0
Me encantaría conocer tu opinión, por favor comenta.x