Design e tema

Tudo que dá caráter a uma App — suas cores, fontes, cabeçalho, o cromado de navegação e o assistente embutido — é editado graficamente, sem JSON nem CSS. Tudo mora atrás de um controle só: Design.

Abrindo o inspetor de design

Uma App abre sangrando na tela em modo de visualização — a superfície limpa e publicada que seu público vê, sem cromado de edição. Para mudar, clique em Editar no cabeçalho e depois em Design. Um painel desliza da direita com cinco abas:

Theme · Header · Nav · Assistant · Pages

Toda mudança é pré-visualizada ao vivo na App atrás do painel. Salve quando estiver satisfeito.

Dica

Dê dois cliques no cabeçalho da App enquanto edita para pular direto para a aba Header.

Tema

A aba Theme é de onde vem a aparência da App — um conjunto estruturado de tokens de design, não CSS escrito à mão.

Presets

Comece por um preset — uma aparência curada e coesa que você aplica num clique:

Preset	Caráter
Editorial	Fundo creme quente, títulos com serifa, acento verde
Minimal	Fundo branco, bordas de fio de cabelo, sem sombras
Dark Ops	Fundo carvão, superfícies elevadas, acento ciano
Corporate	Fundo cinza frio, acento azul, cards nítidos

Escolher um preset re-veste a App inteira instantaneamente. É o caminho mais rápido para um resultado caprichado; ajuste a partir dali.

Descreva sua marca

Prefere palavras a amostras de cor? Digite uma descrição em linguagem simples — “warm editorial look, green accent, rounded cards” ou “dark control-room ops, cyan accent with amber highlights” — e clique em Gerar tema. A descrição é interpretada como um preset mais as cores, fontes e forma que ela implica, e aplicada ao vivo.

Cores, tipografia e forma

Abaixo dos presets, ajuste os tokens direto:

• Cores — Acento, Marca (uma cor secundária para o logotipo / quadrado de marca), Fundo, Cards, Texto, e as cores Sobe / Desce para valores positivos / negativos.
• Tipografia — uma fonte de Títulos e uma de Corpo, cada uma de uma allowlist curada (as fontes vêm embutidas, nunca são buscadas num CDN), mais Números: qual família carrega os algarismos — manchetes de KPI e células numéricas de tabela. Monoespaçada mantém colunas de números alinhadas e dá aquele ar de livro-razão que produtos de dados usam; as outras opções apontam para a família de títulos ou de corpo, então mudar essas se propaga.
• Forma — raio de canto, profundidade de sombra, densidade (quão apertado é o espaçamento) e a barra de borda do KPI — ponha em Tone para colorir a borda esquerda de cada tile de KPI conforme o número sobe ou desce, de modo que uma fileira de KPIs se leia de relance.

Qualquer token que você definir sobrescreve o preset; tokens intocados mantêm o valor do preset.

Gráficos seguem o tema

Tiles de gráfico pintam a partir dos tokens da App, não da interface do Saiku em volta — então trocar de preset re-tematiza os gráficos junto com todo o resto: cores de série, rótulos de eixo, linhas de grade e títulos se movem juntos.

Um tile de option do ECharts escrito à mão é sobreposto à linha de base tematizada. O que a option declara vence; o que ela deixa de dizer é herdado. Na prática isso quer dizer que você só escreve as partes do gráfico que são genuinamente sob medida, e a paleta da App faz o resto.

Cabeçalho

A aba Header controla a barra superior de marca:

• Nome da App e uma palavra de acento opcional — um trecho do nome renderizado na cor da marca (ex.: “FoodMart Ops”).
• Eyebrow — uma pequena linha em maiúsculas depois de um divisor (“Store Intelligence”).
• Pílula de contexto — um seletor rotulado à direita (ex.: Store · Portland #14). Veja abaixo.
• Selo Live — um chip de status com um ponto. Veja abaixo.

Pílula de contexto

A pílula é um controle de verdade, não enfeite: dê a ela opções e um nível para filtrar, e escolher um re-escopa todos os tiles da App — em todas as páginas, não só a que você está olhando. A seleção te acompanha conforme você anda pelas páginas.

Defina o Rótulo (“Store”) e um Valor padrão, e então escolha de onde vêm as opções:

• Do cubo (recomendado) — todo membro do nível que a pílula filtra, lido ao vivo. Uma loja que abre, fecha ou é renomeada aparece sem ninguém editar a App.
• Lista digitada — opções que você escreve à mão, para casos em que quer um subconjunto curado ou uma redação mais amigável que as captions do cubo.

Em Filtra em, nomeie a dimensão, hierarquia e nível aos quais a seleção se aplica. Deixe em branco para uma pílula puramente cosmética — selecionar então só muda o texto do cabeçalho.

Marque Adicionar uma entrada “todos” para uma linha que limpa o filtro (redija como quiser — “All stores · National”).

A seleção atual viaja na URL como ?ctx=…, então um link que você copia enquanto escopado numa região abre escopado naquela região. Um filtro de clique no nível do tile ainda consegue estreitar além da pílula na página em que você está — a pílula define o escopo da App, não um teto para cada interação.

Nota

A pílula não tem cubo próprio: ela lê seus membros do primeiro tile ligado a cubo da App. Numa App novinha sem tiles, o inspetor diz isso em vez de reportar um nível vazio.

Nota

Um dropdown deixa de ser usável em algum ponto perto de umas duzentas entradas, então uma pílula alimentada pelo cubo limita a lista. Quando um nível é maior que isso, o inspetor te diz exatamente quantos membros encontrou e quantos serão oferecidos — você nunca vê uma lista parcial como se fosse o nível inteiro. Para um nível desse tamanho, um tile de filtro é o controle melhor.

Selo Live

Digite a redação que quiser para o estado conectado (“Live · Saiku”, “Connected to Acme BI”), e o selo reflete uma sondagem real do backend:

Estado	Mostra
Conectado	sua redação, em verde
Instância demo	”Demo data”, em âmbar
Inalcançável	”Offline”, em vermelho

Deixe o campo em branco para esconder o selo por completo. Ele fica deliberadamente neutro até a primeira sondagem responder, em vez de alegar uma conexão saudável que não confirmou.

Navegação

A aba Nav controla o menu:

• Posicionamento — trilho à esquerda ou abas no topo.
• Começar recolhido — abrir o trilho só com ícones.
• Altura total — fazer o trilho correr toda a altura do shell com o cabeçalho ao lado, em vez do cabeçalho atravessando o topo. Esse é o visual de shell de produto em que o trilho é o cromado mais externo.
• Rodapé do trilho — fixe uma engrenagem de configurações e um disco de usuário:

Disco de usuário	Mostra
Usuário logado	iniciais derivadas de quem está vendo
Fixo	as mesmas iniciais para todo mundo — uma maquete ou um quiosque compartilhado
Desligado	sem disco

Dica

Prefira Usuário logado. Um disco fixo carimba todo espectador com as iniciais de uma pessoa só, o que se lê como bug no momento em que outra pessoa abre a App.

Assistente

A aba Assistant configura o painel Ask embutido opcional — um chat em linguagem natural escopado ao cubo da App:

• Ligue, defina o título (“Ask FoodMart”), a persona e a nota de escopo.
• Escreva a saudação de abertura.
• Escolha o ícone do cabeçalho (brilhos ou mira).
• Adicione prompts sugeridos e chips de skill (os atalhos ⌘) com os editores de lista.
• Defina a dica de rodapé do compositor e a atribuição.

Páginas

A aba Pages gerencia as páginas da App e seus títulos:

• Adicione uma página, e defina o título de navegação e o ícone de cada uma.
• Dê a uma página um título, um subtítulo e um meta alinhado à direita — a faixa de título que abre a página (ex.: Portland #14 · Today / Regional manager view / Thu · Week 41).

Valores ao vivo no texto da página

Um título digitado como texto puro fica congelado no momento em que você o escreveu — vai continuar dizendo “Portland #14” quando a App estiver escopada em Seattle, e “Thu · Week 41” para sempre. Títulos, subtítulos e linhas meta portanto aceitam bindings, resolvidos toda vez que a página renderiza:

Binding	Resolve para
{context}	a seleção atual da pílula de contexto
{filter:Store}	a seleção atual de uma dimensão nomeada
{user.name}	o usuário logado
{user.initials}	as iniciais dele
{app.name}	o nome da App
{date}	a data de hoje
{date:weekday}	nome do dia — Thu
{date:month}, {date:year}	October, 2026
{week}	número da semana ISO

Então um título {context} · Overview acompanha o seletor de loja, e uma linha meta {date:weekday} · Week {week} é sempre hoje. Expanda Inserir um valor ao vivo sob o campo meta para ver a lista e clique num para copiar.

Nota

Qualquer coisa que não seja um binding reconhecido é usada literalmente — um {user.nmae} digitado errado renderiza como está, em vez de sumir, então você enxerga o erro de digitação. Escreva {{ para uma chave literal.

Avançado — CSS customizado

Os presets e tokens cobrem a esmagadora maioria da marca. Para o raro caso de cauda longa, a aba Theme tem um recuo Avançado — CSS customizado.

Dica

Recorra a ele tarde. A App de referência FoodMart Ops que vem com o Saiku — cabeçalho de marca, trilho de ícones, fileira de KPIs, gráfico de tendência tematizado, card “Movers” ranqueado e assistente embutido — não contém CSS customizado nenhum. Se você se pegar escrevendo seletores para remodelar um tile, geralmente existe um tipo de tile ou um token que faz aquilo direito, e essa versão sobrevive a uma troca de tema que o CSS escrito à mão não sobrevive.

Nota

CSS customizado é sempre sanitizado e escopado àquela App antes de ser aplicado — não vaza para o resto da interface do Saiku, e construções inseguras são descartadas em vez de aplicadas pela metade. Você não deveria precisar dele para marca padrão.

Relacionado

• Visão geral do App Builder — o que é uma App e como ela difere de um dashboard.
• Construindo páginas e tiles — adicione páginas, solte tiles e ligue-os aos seus cubos.
• Embutindo uma App — ponha uma App tematizada em qualquer página web.