Cómo trabajar con diseños SVG, botones SVG y automatización de campos y colores en AppSheet

Categorías

AppSheet

En este artículo aprenderás cómo usar SVG dentro de AppSheet para crear tarjetas visuales, estados dinámicos y botones personalizados que se convierten en acciones reales dentro de tu app.

El contenido está basado en una práctica real paso a paso (la misma que muestro en el video) y está pensado para personas que ya usan AppSheet y quieren subir el nivel visual de sus aplicaciones.

En este video aprenderás todo sobre SVG en AppSheet, explicado paso a paso

En este video se muestra de forma clara y práctica todo lo que se explica en el artículo, con ejemplos reales y una explicación visual que hace el proceso mucho más fácil de entender.

Descarga los archivos que utilizaremos en este video: Prompts, Base de Datos y App de AppSheet

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.

SVG en AppSheet – Kit Completo de Prompts, Base de Datos y App

Precio Sugerido: $3,49

¿Qué es SVG y por qué usarlo en AppSheet?

SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales basado en texto. A diferencia de una imagen PNG o JPG:

No pierde calidad al escalarse
Se puede modificar por código (colores, textos, tamaños)
Es ligero
Permite diseños completamente personalizados

En AppSheet, el SVG se puede usar como imagen, tarjeta visual, estado, o incluso como botón interactivo cuando se combina con HTML.

Flujo de trabajo para generar un diseño SVG adaptado a AppSheet

Antes de entrar en lo técnico, este es el flujo recomendado:

Diseñar el SVG con ayuda de IA
Visualizar y ajustar Campos en el SVG antes de llevarlo a AppSheet
Adaptar con IA el SVG para que AppSheet lo soporte correctamente
Insertarlo en columnas virtuales tipo SHOW / Image
Agregar a las vistas y listo

En el video te explico esta parte de forma detallada, utilizando ejemplos prácticos paso a paso.

¿Con qué inteligencias artificiales y herramientas recomiendo trabajar para crear SVG en AppSheet?

Para trabajar con SVG en AppSheet, recomiendo usar una combinación de inteligencias artificiales y herramientas que facilitan tanto el diseño como la adaptación del código.

Gemini: Ideal para crear diseños SVG y visualizarlos en tiempo real gracias a su sección de Canvas, lo que permite ajustar el diseño de forma visual antes de llevarlo a AppSheet.
Claude: Muy potente para trabajar con código. Ofrece mejores resultados al crear y ajustar SVG, especialmente cuando se trata de estructuras más técnicas y limpias.
SVG Viewer: Herramienta clave para visualizar, probar y editar los SVG antes de usarlos en AppSheet, evitando errores de tamaño o alineación.
ChatGPT: Se utiliza para enviar el prompt de adaptación y lograr que los SVG sean compatibles y aceptados correctamente por AppSheet.

Estas herramientas, usadas en conjunto, permiten crear diseños SVG funcionales, optimizados y listos para AppSheet.

Cómo insertar SVG en AppSheet (Tipos, Show, Fórmula, Content)

La forma más común de usar SVG en AppSheet es mediante columnas virtuales de tipo SHOW.

Configuración recomendada:

App formula: «»
Tipo de columna: SHOW
Category: Image
Content: pegar el código SVG completo

De esta forma, el SVG se mostrará como una imagen.

Cómo crear botones con SVG que ejecutan acciones reales en AppSheet

Aquí es donde el SVG deja de ser solo diseño y se convierte en acción real.

1. Crear tabla de botones

Debes crear una tabla llamada, por ejemplo: Botones

Columnas recomendadas:

ID → Text
Nombre → Text
HTML (SVG) → LongText

En la columna del SVG:

Tipo: LongText
Formatting: HTML

⚠️ Si no ves la opción Formatting:

Ve a: Settings → General → Preview new features

Actívala y ya tendrás acceso al HTML.

2. Mostrar el botón en otra tabla

En la tabla donde quieres mostrar el botón:

1. Crea una columna virtual

2. Fórmula:

INDEX(Botones[HTML], 1)

3. Tipo: LongText

4. Formatting: HTML

Con esto, el SVG ya se muestra como botón.

3. Convertir el SVG en una acción

Ahora el último paso:

Crea una acción en Behavior → Actions
En Position, selecciona:

- Inline
- Elige la columna virtual donde está el SVG

🎯 Resultado:

El botón SVG ahora ejecuta una acción real en AppSheet.

Recomendaciones de tamaños para SVG en AppSheet

Estos tamaños no son exactos, pero funcionan muy bien en la práctica.

Vista Detail – Tarjetas

viewBox: 0 0 320 200
Ancho: 100%
Alto: automático (no fijar)

Botones SVG en vista Detail

viewBox sugerido: 0 0 200 50
Ancho: 100%
Contenido centrado (text-anchor, alignment-baseline)
Alto: automático

Tarjetas con dos cuadros

viewBox: 0 0 320 200
Distribución:
Cuadro izquierdo: 0 → 160
Cuadro derecho: 160 → 320

Cada cuadro debe manejar su contenido de forma independiente. Estas recomendaciones puedes enviárselas directamente a la IA para que genere un diseño SVG más adecuado y compatible con AppSheet.