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
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]>> | <<[Campo]>> |
| Campo Referenciado | <<[Producto].[Precio]>> | <<[Producto].[Precio]>> |
| Sentencia IF | <<IF([Descuento]="";"";[Descuento])>> | <<IF([Descuento]="";"";[Descuento])>> |
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:
<<Start: [Related PRODUCTOSs]>>
<<[Campo1]>>
<<[Campo2]>>
<<[Campo3]>>
<<End>>
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><<Start: [Related PRODUCTOSs]>>
<tbody>
<tr>
<td><<[Campo1]>></td>
<td><<[Campo2]>></td>
<td><<[Campo3]>></td>
</tr>
</tbody>
<<End>></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 <<[NombreColumna]>>. 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).
Datos del cliente: Inserta los campos básicos como el nombre de la empresa y la fecha de la cotización.
Tabla de productos: Usa la sintaxis
<<Start: [Related_Productos]>>y<<End>>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<<[NombreProducto]>>y<<[Precio]>>. 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.
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.
3️⃣ Configurar la tabla de datos
Agrega dos columnas nuevas:
COD→ Tipo: NumberPDF→ Tipo: File
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")
5️⃣ Crear el Bot
- Activación: Cuando se actualice la tabla.
Condición del Bot:
[_THISROW_BEFORE].[COD]<>[_THISROW_AFTER].[COD]
6️⃣ Crear el Proceso
Tipo de proceso: Run a Task
En settings: selecciona Create a new file.
Configura:
HTTP Content type → HTML
Template: Selecciona tu archivo HTML/CSS modificado
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")
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());
}
}



