Diseño y tematización
Todo lo que da carácter a una App — sus colores, fuentes, cabecera, el cromado de navegación y el asistente integrado — se edita gráficamente, sin JSON ni CSS. Todo vive tras un único control: Diseño.
Abrir el inspector de diseño
Una App abre a sangre en modo vista — la superficie limpia y publicada que ve su audiencia, sin cromado de edición. Para hacer cambios, pulse Editar en la cabecera y luego Diseño. Un panel entra desde la derecha con cinco pestañas:
Theme · Header · Nav · Assistant · Pages
Cada cambio se previsualiza en vivo sobre la App detrás del panel. Guarde cuando esté conforme.
Tema
La pestaña Theme es de donde sale el aspecto de la App — un conjunto estructurado de tokens de diseño, no CSS escrito a mano.
Presets
Empiece desde un preset — un look curado y coherente que aplica de un clic:
| Preset | Carácter |
|---|---|
| Editorial | Fondo crema cálido, titulares con serifa, acento verde |
| Minimal | Fondo blanco, bordes de un pelo, sin sombras |
| Dark Ops | Fondo carbón, superficies elevadas, acento cian |
| Corporate | Fondo gris frío, acento azul, tarjetas nítidas |
Elegir un preset re-viste la App entera al instante. Es la vía más rápida a un resultado pulido; afine desde ahí.
Describa su marca
¿Prefiere palabras a muestras de color? Escriba una descripción en lenguaje llano — «warm editorial look, green accent, rounded cards» o «dark control-room ops, cyan accent with amber highlights» — y pulse Generar tema. La descripción se interpreta como un preset más los colores, fuentes y forma que implica, y se aplica en vivo.
Colores, tipografía y forma
Bajo los presets, ajuste los tokens directamente:
- Colores — Acento, Marca (un color secundario para el logotipo / cuadro de marca), Fondo, Tarjetas, Texto, y los colores Arriba / Abajo para valores positivos / negativos.
- Tipografía — una fuente de Titulares y una de Cuerpo, cada una de una allowlist curada (las fuentes van empaquetadas, nunca se piden a un CDN), más Números: qué familia lleva las cifras — titulares de KPI y celdas numéricas de tabla. Monoespaciada mantiene las columnas de cifras alineadas y da ese aire de libro mayor que usan los productos de datos; las otras opciones apuntan a la familia de titulares o de cuerpo, así que cambiar ésas se propaga.
- Forma — radio de esquina, profundidad de sombra, densidad (cuán apretado es el espaciado) y la barra de borde del KPI — póngala en Tone para colorear el borde izquierdo de cada tile de KPI según si el número sube o baja, de modo que una fila de KPIs se lea de un vistazo.
Cualquier token que fije sobrescribe el preset; los tokens intactos conservan el valor del preset.
Los gráficos siguen al tema
Los tiles de gráfico pintan desde los tokens de la App, no desde la interfaz de Saiku que los rodea — así que cambiar de preset re-tematiza los gráficos junto con todo lo demás: colores de serie, etiquetas de eje, líneas de rejilla y títulos se mueven juntos.
Un tile de option de ECharts escrito a mano se superpone sobre esa línea base tematizada. Lo que la option afirme gana; lo que deje sin decir se hereda. En la práctica eso significa que solo escribe las partes del gráfico que son genuinamente a medida, y la paleta de la App hace el resto.
Cabecera
La pestaña Header controla la barra superior de marca:
- Nombre de la App y una palabra de acento opcional — una subcadena del nombre dibujada en el color de marca (p. ej. «FoodMart Ops»).
- Eyebrow — una pequeña línea en mayúsculas tras un separador («Store Intelligence»).
- Píldora de contexto — un selector etiquetado a la derecha (p. ej. Store · Portland #14). Vea abajo.
- Insignia Live — un chip de estado con un punto. Vea abajo.
Píldora de contexto
La píldora es un control de verdad, no adorno: dele opciones y un nivel por el que filtrar, y elegir uno re-acota todos los tiles de la App — en todas las páginas, no solo en la que está mirando. La selección le acompaña mientras se mueve por las páginas.
Fije la Etiqueta («Store») y un Valor por defecto, y luego elija de dónde salen las opciones:
- Del cubo (recomendado) — todos los miembros del nivel por el que filtra la píldora, leídos en vivo. Una tienda que abre, cierra o se renombra aparece sin que nadie edite la App.
- Lista escrita — opciones que escribe a mano, para casos en que quiere un subconjunto curado o una redacción más amable que las captions del cubo.
Bajo Filtra sobre, nombre la dimensión, jerarquía y nivel a los que aplica la selección. Déjelos en blanco para una píldora puramente cosmética — seleccionar solo cambiará entonces el texto de la cabecera.
Marque Añadir una entrada «todos» para una fila que limpie el filtro (redáctela como quiera — «All stores · National»).
La selección actual viaja en la URL como ?ctx=…, así que un enlace que
copie estando acotado a una región abre acotado a esa región. Un filtro
de clic a nivel de tile todavía puede estrechar más allá de la píldora
en la página en que esté — la píldora fija el alcance de la App, no un
techo para cada interacción.
Insignia Live
Escriba la redacción que quiera para el estado conectado («Live · Saiku», «Connected to Acme BI»), y la insignia refleja un sondeo real del backend:
| Estado | Muestra |
|---|---|
| Conectado | su redacción, en verde |
| Instancia demo | «Demo data», en ámbar |
| Inalcanzable | «Offline», en rojo |
Deje el campo en blanco para ocultar la insignia por completo. Se queda deliberadamente neutra hasta que el primer sondeo responde, en vez de proclamar una conexión sana que no ha confirmado.
Navegación
La pestaña Nav controla el menú:
- Colocación — raíl izquierdo o pestañas arriba.
- Empezar colapsado — abrir el raíl solo con iconos.
- Altura completa — que el raíl recorra toda la altura del armazón con la cabecera al lado, en vez de que la cabecera abarque el ancho. Éste es el aire de shell de producto donde el raíl es el cromado más externo.
- Pie del raíl — fije un engranaje de ajustes, y un disco de usuario:
| Disco de usuario | Muestra |
|---|---|
| Usuario identificado | iniciales derivadas de quien esté viendo |
| Fijo | las mismas iniciales para todos — una maqueta o un quiosco compartido |
| Apagado | sin disco |
Asistente
La pestaña Assistant configura el panel opcional Ask integrado — un chat en lenguaje natural acotado al cubo de la App:
- Actívelo, fije el título («Ask FoodMart»), la persona y la nota de alcance.
- Escriba el saludo de apertura.
- Elija el icono de cabecera (destellos o retícula).
- Añada prompts sugeridos y chips de skill (los atajos ⌘) con los editores de lista.
- Fije la pista de pie del compositor y la atribución.
Páginas
La pestaña Pages gestiona las páginas de la App y sus títulos:
- Añada una página, y fije el título de navegación y el icono de cada una.
- Dele a una página un encabezado, un subtítulo y un meta alineado a la derecha — la banda de título que abre la página (p. ej. Portland #14 · Today / Regional manager view / Thu · Week 41).
Valores en vivo en el texto de página
Un encabezado escrito como texto plano queda congelado en el momento en que lo escribió — seguirá diciendo «Portland #14» cuando la App esté acotada a Seattle, y «Thu · Week 41» para siempre. Por eso los encabezados, subtítulos y líneas meta aceptan bindings, resueltos cada vez que la página se dibuja:
| Binding | Se resuelve como |
|---|---|
{context} | la selección actual de la píldora de contexto |
{filter:Store} | la selección actual de una dimensión nombrada |
{user.name} | el usuario identificado |
{user.initials} | sus iniciales |
{app.name} | el nombre de la App |
{date} | la fecha de hoy |
{date:weekday} | nombre del día — Thu |
{date:month}, {date:year} | October, 2026 |
{week} | número de semana ISO |
Así, un encabezado {context} · Overview sigue al selector de tienda, y
una línea meta {date:weekday} · Week {week} siempre es hoy. Despliegue
Insertar un valor en vivo bajo el campo meta para ver la lista y
haga clic en uno para copiarlo.
Avanzado — CSS personalizado
Los presets y tokens cubren la inmensa mayoría del branding. Para el raro caso de cola larga, la pestaña Theme tiene un desplegable Avanzado — CSS personalizado.
Relacionado
- Visión general de App Builder — qué es una App y en qué se diferencia de un dashboard.
- Construir páginas y tiles — añada páginas, suelte tiles y vincúlelos a sus cubos.
- Incrustar una App — ponga una App tematizada en cualquier página web.