Design & Theming

Alles, was einer App ihren Charakter gibt — ihre Farben, Schriften, der Header, die Navigations-Chrome und der In-App-Assistent — wird grafisch bearbeitet, ohne JSON oder CSS. Das alles steckt hinter einer Steuerung: Design.

Den Design-Inspector öffnen

Eine App öffnet randlos im Ansichtsmodus — die saubere, veröffentlichte Oberfläche, die Ihr Publikum sieht, ohne Bearbeitungs-Chrome. Um etwas zu ändern, klicken Sie im Header auf Bearbeiten, dann auf Design. Ein Panel fährt von rechts herein, mit fünf Tabs:

Theme · Header · Nav · Assistant · Pages

Jede Änderung wird live auf der App hinter dem Panel vorschau- gerendert. Speichern Sie, wenn Sie zufrieden sind.

Tipp

Doppelklicken Sie beim Bearbeiten auf den App-Header, um direkt zum Tab Header zu springen.

Theme

Der Theme-Tab ist, woher das Aussehen der App kommt — ein strukturierter Satz von Design-Tokens, kein handgeschriebenes CSS.

Presets

Starten Sie von einem Preset — einem kuratierten, stimmigen Look, den Sie mit einem Klick anwenden:

Preset	Charakter
Editorial	Warmer Creme-Grund, Serifen-Überschriften, grüner Akzent
Minimal	Weißer Grund, haarfeine Rahmen, keine Schatten
Dark Ops	Anthrazit-Grund, erhobene Flächen, cyanfarbener Akzent
Corporate	Kühlgrauer Grund, blauer Akzent, knackige Karten

Ein Preset zu wählen skint die gesamte App augenblicklich neu. Es ist der schnellste Weg zu einem polierten Ergebnis; feinjustieren Sie von dort aus.

Beschreiben Sie Ihre Marke

Lieber Worte als Farbfelder? Tippen Sie eine Beschreibung in einfacher Sprache — „warm editorial look, green accent, rounded cards” oder „dark control-room ops, cyan accent with amber highlights” — und klicken Sie auf Theme generieren. Die Beschreibung wird in ein Preset plus die Farben, Schriften und Form geparst, die sie impliziert, und live angewendet.

Farben, Typografie & Form

Unter den Presets justieren Sie die Tokens direkt:

• Farben — Akzent, Markenzeichen (eine Sekundärfarbe für Wortmarke / Logo-Quadrat), Hintergrund, Karten, Text und die Auf- / Ab-Farben für positive / negative Werte.
• Typografie — je eine Schrift für Überschriften und Fließtext, jede aus einer kuratierten Allowlist (die Schriften sind mitgeliefert und werden nie von einem CDN geholt), plus Zahlen: welcher Stack die Ziffern trägt — KPI-Schlagzeilen und numerische Tabellenzellen. Monospace hält Zifferspalten ausgerichtet und gibt den Hauptbuch-Look, den Datenprodukte nutzen; die anderen Optionen zeigen auf den Überschriften- oder Fließtext-Stack, sodass deren Änderung durchschlägt.
• Form — Eckenradius, Schattentiefe, Dichte (wie eng die Abstände sind) und die KPI-Kantenleiste — stellen Sie sie auf Tone, um die linke Kante jedes KPI-Tiles danach einzufärben, ob die Zahl rauf oder runter geht, sodass eine Reihe von KPIs auf einen Blick lesbar wird.

Jedes Token, das Sie setzen, überschreibt das Preset; unangetastete Tokens behalten den Wert des Presets.

Charts folgen dem Theme

Chart-Tiles malen aus den Tokens der App, nicht aus der umgebenden Saiku-Oberfläche — ein Preset-Wechsel thematisiert die Charts also zusammen mit allem anderen neu: Serienfarben, Achsenbeschriftungen, Gitterlinien und Titel bewegen sich gemeinsam.

Ein handgeschriebenes ECharts-Option-Tile wird über diese gethemte Grundlinie gelegt. Was die Option ausspricht, gewinnt; was sie unausgesprochen lässt, wird geerbt. In der Praxis heißt das, Sie schreiben nur die Teile eines Diagramms, die wirklich maßgeschneidert sind, und die Palette der App macht den Rest.

Header

Der Tab Header steuert die gebrandete obere Leiste:

• App-Name und ein optionales Akzentwort — ein Teilstring des Namens, gerendert in der Markenzeichen-Farbe (z. B. „FoodMart Ops”).
• Eyebrow — eine kleine Großbuchstaben-Zeile nach einem Trenner („Store Intelligence”).
• Kontext-Pille — ein beschrifteter Selektor rechts (z. B. Store · Portland #14). Siehe unten.
• Live-Badge — ein Status-Chip mit Punkt. Siehe unten.

Kontext-Pille

Die Pille ist eine echte Steuerung, keine Dekoration: Geben Sie ihr Optionen und ein Level zum Filtern, und eines auszuwählen scopet jedes Tile der App neu — auf jeder Seite, nicht nur der, die Sie gerade ansehen. Die Auswahl folgt Ihnen, während Sie durch die Seiten gehen.

Setzen Sie das Label („Store”) und einen Standardwert, und wählen Sie dann, woher die Optionen kommen:

• Aus dem Cube (empfohlen) — jeder Member des Levels, auf das die Pille filtert, live gelesen. Eine Filiale, die eröffnet, schließt oder umbenannt wird, taucht auf, ohne dass jemand die App bearbeitet.
• Getippte Liste — Optionen, die Sie von Hand schreiben, für Fälle, in denen Sie eine kuratierte Teilmenge oder freundlichere Formulierung als die Captions des Cubes wollen.

Unter Filtert auf benennen Sie Dimension, Hierarchie und Level, für die die Auswahl gilt. Lassen Sie die leer für eine rein kosmetische Pille — Auswählen ändert dann nur den Header-Text.

Haken Sie Einen „Alle”-Eintrag hinzufügen an für eine Zeile, die den Filter löscht (formulieren Sie es, wie Sie mögen — „All stores · National”).

Die aktuelle Auswahl reitet in der URL als ?ctx=… mit, ein Link, den Sie in einer Region-Scope kopieren, öffnet also in dieser Region. Ein Klickfilter auf Tile-Ebene kann auf der Seite, auf der Sie sind, weiterhin über die Pille hinaus verengen — die Pille setzt den Scope der App, keine Obergrenze für jede Interaktion.

Hinweis

Die Pille hat keinen eigenen Cube: Sie liest ihre Member aus dem ersten cubegebundenen Tile der App. Bei einer brandneuen App ohne Tiles sagt der Inspector das, statt ein leeres Level zu melden.

Hinweis

Ein Dropdown hört irgendwo bei ein paar hundert Einträgen auf, benutzbar zu sein, eine cube-gespeiste Pille deckelt ihre Liste also. Ist ein Level größer als das, sagt der Inspector Ihnen genau, wie viele Member er gefunden hat und wie viele angeboten werden — Ihnen wird nie eine Teilliste gezeigt, als wäre sie das ganze Level. Für ein so großes Level ist ein Filter-Tile die bessere Steuerung.

Live-Badge

Tippen Sie die Formulierung, die Sie für den verbundenen Zustand wollen („Live · Saiku”, „Connected to Acme BI”), und das Badge spiegelt eine tatsächliche Probe des Backends:

Zustand	Zeigt
Verbunden	Ihre Formulierung, in Grün
Demo-Instanz	„Demo data”, in Bernstein
Nicht erreichbar	„Offline”, in Rot

Lassen Sie das Feld leer, um das Badge ganz auszublenden. Es bleibt absichtlich neutral, bis die erste Probe antwortet, statt eine gesunde Verbindung zu behaupten, die es nicht bestätigt hat.

Navigation

Der Tab Nav steuert das Menü:

• Platzierung — linke Leiste oder obere Tabs.
• Eingeklappt starten — die Leiste nur als Icons öffnen.
• Volle Höhe — die Leiste über die ganze Höhe der Shell laufen lassen, mit dem Header daneben, statt dass der Header oben durchgeht. Das ist der Produkt-Shell-Look, bei dem die Leiste die äußerste Chrome ist.
• Leisten-Footer — ein Einstellungs-Zahnrad anheften und eine Benutzer-Scheibe:

Benutzer-Scheibe	Zeigt
Angemeldeter Benutzer	Initialen, abgeleitet von dem, der gerade schaut
Fest	dieselben Initialen für alle — ein Mock-up oder ein geteiltes Kiosk
Aus	keine Scheibe

Tipp

Bevorzugen Sie Angemeldeter Benutzer. Eine feste Scheibe badget jeden Betrachter mit den Initialen einer Person, was in dem Moment wie ein Bug aussieht, in dem jemand anderes die App öffnet.

Assistent

Der Tab Assistant konfiguriert das optionale In-App-Ask-Panel — einen Natural-Language-Chat, gescopet auf den Cube der App:

• Schalten Sie ihn ein, setzen Sie Titel („Ask FoodMart”), Persona und Scope-Notiz.
• Schreiben Sie die eröffnende Begrüßung.
• Wählen Sie das Header-Icon (Sparkles oder Fadenkreuz).
• Ergänzen Sie Vorschlags-Prompts und Skill-Chips (die ⌘-Shortcuts) mit den Listeneditoren.
• Setzen Sie den Footer-Hinweis und die Attribution des Composers.

Seiten

Der Tab Pages verwaltet die Seiten der App und ihre Titel:

• Hinzufügen einer Seite und Setzen von Navigations-Titel und Icon jeder Seite.
• Einer Seite eine Überschrift, Unterüberschrift und rechtsbündiges Meta geben — das Titelband, das die Seite eröffnet (z. B. Portland #14 · Today / Regional manager view / Thu · Week 41).

Live-Werte im Seitentext

Eine als reiner Text getippte Überschrift ist in dem Moment eingefroren, in dem Sie sie geschrieben haben — sie wird immer noch „Portland #14” sagen, wenn die App auf Seattle gescopet ist, und „Thu · Week 41” für immer. Überschriften, Unterüberschriften und Meta-Zeilen akzeptieren deshalb Bindings, die bei jedem Rendern der Seite aufgelöst werden:

Binding	Löst auf zu
{context}	die aktuelle Auswahl der Kontext-Pille
{filter:Store}	die aktuelle Auswahl für eine benannte Dimension
{user.name}	der angemeldete Benutzer
{user.initials}	dessen Initialen
{app.name}	der Name der App
{date}	das heutige Datum
{date:weekday}	Tagesname — Thu
{date:month}, {date:year}	October, 2026
{week}	ISO-Kalenderwoche

Eine Überschrift {context} · Overview folgt also dem Filialselektor, und eine Meta-Zeile {date:weekday} · Week {week} ist immer heute. Klappen Sie Einen Live-Wert einfügen unter dem Meta-Feld auf, um die Liste zu sehen, und klicken Sie einen an, um ihn zu kopieren.

Hinweis

Alles, was kein erkanntes Binding ist, wird wörtlich verwendet — ein vertipptes {user.nmae} rendert so, wie es dasteht, statt zu verschwinden, Sie sehen den Tippfehler also. Schreiben Sie {{ für eine literale Klammer.

Erweitert — Custom CSS

Die Presets und Tokens decken die überwältigende Mehrheit des Brandings ab. Für den seltenen Long-Tail-Fall hat der Theme-Tab eine Aufklappung Erweitert — Custom CSS.

Tipp

Greifen Sie spät danach. Die Referenz-App FoodMart Ops, die mit Saiku ausgeliefert wird — gebrandeter Header, Icon-Leiste, KPI-Reihe, gethemtes Trend-Diagramm, Ranked-„Movers”-Karte und In-App-Assistent — enthält überhaupt kein Custom CSS. Wenn Sie sich dabei ertappen, Selektoren zu schreiben, um ein Tile umzuformen, gibt es meist einen Tile-Typ oder ein Token, das es richtig macht, und diese Fassung überlebt einen Theme-Wechsel, den handgeschriebenes CSS nicht übersteht.

Hinweis

Custom CSS wird immer sanitisiert und auf diese App gescopet, bevor es angewendet wird — es kann nicht in den Rest der Saiku-Oberfläche lecken, und unsichere Konstrukte werden verworfen statt teilweise angewendet. Für Standard-Branding sollten Sie es nicht brauchen.

Verwandt

• App-Builder-Überblick — was eine App ist und wie sie sich von einem Dashboard unterscheidet.
• Seiten & Tiles bauen — Seiten hinzufügen, Tiles ablegen und an Ihre Cubes binden.
• Eine App einbetten — eine gethemte App auf jede Webseite bringen.