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

Categorías

Cómo trabajar con diseños SVG, botones SVG y automatizaciones avanzadas en AppSheet
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:

  1. Diseñar el SVG con ayuda de IA
  2. Visualizar y ajustar Campos en el SVG antes de llevarlo a AppSheet
  3. Adaptar con IA el SVG para que AppSheet lo soporte correctamente
  4. Insertarlo en columnas virtuales tipo SHOW / Image 
  5. 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:

  1. Crea una acción en Behavior → Actions
  2. 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.

guest
0 Comentarios
más antiguo
El más nuevo Más votado
Comentarios en línea
Ver todos los comentarios

Categorías

Contactos ▾

Ecuador

Ecuador

Cursos ▾

Plantillas ▾

Navegación ▾

2026© Cursos Aspiazu | Hecho por Miguel Aspiazu

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