Design i motywy

Wszystko, co nadaje Appce charakter — jej kolory, fonty, nagłówek, oprawa nawigacji i wbudowany asystent — edytuje się graficznie, bez JSON-a i CSS-a. Wszystko to siedzi za jedną kontrolką: Design.

Otwieranie inspektora designu

Appka otwiera się na całą szerokość w trybie podglądu — czysta, opublikowana powierzchnia, którą widzi Twoja publiczność, bez oprawy edycyjnej. Żeby coś zmienić, kliknij Edytuj w nagłówku, a potem Design. Z prawej wjeżdża panel z pięcioma zakładkami:

Theme · Header · Nav · Assistant · Pages

Każda zmiana wyświetla się na żywo na Appce za panelem. Zapisz, gdy będziesz zadowolony.

Wskazówka

Kliknij dwukrotnie nagłówek Appki podczas edycji, by przeskoczyć wprost do zakładki Header.

Motyw

Zakładka Theme to miejsce, z którego bierze się wygląd Appki — uporządkowany zestaw tokenów designu, a nie ręcznie pisany CSS.

Presety

Zacznij od presetu — wyselekcjonowanego, spójnego wyglądu, który zastosujesz jednym kliknięciem:

Preset	Charakter
Editorial	Ciepłe kremowe tło, szeryfowe nagłówki, zielony akcent
Minimal	Białe tło, włoskowate obramowania, bez cieni
Dark Ops	Grafitowe tło, uniesione powierzchnie, cyjanowy akcent
Corporate	Chłodne szare tło, niebieski akcent, ostre karty

Wybór presetu natychmiast przeskórowuje całą Appkę. To najszybsza droga do dopracowanego efektu; stamtąd dostrajaj.

Opisz swoją markę

Wolisz słowa od próbek koloru? Wpisz opis zwykłym językiem — „warm editorial look, green accent, rounded cards” albo „dark control-room ops, cyan accent with amber highlights” — i kliknij Generuj motyw. Opis jest parsowany na preset plus kolory, fonty i formę, które implikuje, i stosowany na żywo.

Kolory, typografia i forma

Pod presetami dostrajaj tokeny wprost:

• Kolory — Akcent, Znak marki (kolor drugorzędny dla logotypu / kwadratu z logo), Tło, Karty, Tekst oraz kolory W górę / W dół dla wartości dodatnich / ujemnych.
• Typografia — font Nagłówków i font Tekstu, każdy z wyselekcjonowanej allowlisty (fonty są dołączone, nigdy ściągane z CDN-a), plus Liczby: który zestaw niesie cyfry — nagłówki KPI i liczbowe komórki tabel. Monospace trzyma kolumny cyfr w równi i daje ten księgowy wygląd, którego używają produkty danych; pozostałe opcje wskazują na zestaw nagłówków albo tekstu, więc ich zmiana przechodzi dalej.
• Forma — promień narożników, głębokość cienia, gęstość (jak ciasne są odstępy) i pasek krawędzi KPI — ustaw go na Tone, by lewa krawędź każdego kafelka KPI kolorowała się wedle tego, czy liczba idzie w górę czy w dół, dzięki czemu rząd KPI czyta się jednym rzutem oka.

Każdy token, który ustawisz, nadpisuje preset; nietknięte tokeny zachowują wartość presetu.

Wykresy idą za motywem

Kafelki wykresów malują z tokenów Appki, a nie z otaczającego interfejsu Saiku — zmiana presetu przemotywuje więc wykresy razem z całą resztą: kolory serii, etykiety osi, linie siatki i tytuły ruszają się wspólnie.

Ręcznie napisany kafelek option ECharts nakłada się na tę umotywowaną linię bazową. Co option powie, to wygrywa; czego nie powie, jest dziedziczone. W praktyce znaczy to, że piszesz tylko te części wykresu, które są naprawdę szyte na miarę, a paleta Appki robi resztę.

Nagłówek

Zakładka Header steruje markowym górnym paskiem:

• Nazwa Appki i opcjonalne słowo akcentowe — podciąg nazwy renderowany kolorem znaku marki (np. „FoodMart Ops”).
• Eyebrow — mała linia wersalikami po separatorze („Store Intelligence”).
• Pigułka kontekstu — opisany selektor po prawej (np. Store · Portland #14). Zobacz niżej.
• Plakietka Live — chip statusu z kropką. Zobacz niżej.

Pigułka kontekstu

Pigułka to prawdziwa kontrolka, nie ozdoba: daj jej opcje i poziom do filtrowania, a wybranie jednego przezakresuje każdy kafelek Appki — na każdej stronie, nie tylko tej, na którą patrzysz. Wybór idzie za Tobą, gdy przechodzisz między stronami.

Ustaw Etykietę („Store”) i Wartość domyślną, a potem wybierz, skąd biorą się opcje:

• Z kostki (zalecane) — każdy member poziomu, po którym pigułka filtruje, czytany na żywo. Sklep, który się otwiera, zamyka albo zmienia nazwę, pojawia się bez edytowania Appki przez kogokolwiek.
• Wpisana lista — opcje, które piszesz ręcznie, na wypadek gdy chcesz wyselekcjonowany podzbiór albo przyjaźniejsze sformułowania niż captiony kostki.

Pod Filtruje po wskaż wymiar, hierarchię i poziom, do których wybór się stosuje. Zostaw je puste dla pigułki czysto kosmetycznej — wybieranie zmieni wtedy tylko tekst nagłówka.

Zaznacz Dodaj pozycję „wszystkie” dla wiersza, który czyści filtr (sformułuj go, jak chcesz — „All stores · National”).

Bieżący wybór jedzie w URL-u jako ?ctx=…, więc link skopiowany w zakresie regionu otworzy się w zakresie tego regionu. Filtr z kliknięcia na poziomie kafelka wciąż może zawęzić poza pigułkę na stronie, na której jesteś — pigułka ustala zakres Appki, a nie sufit dla każdej interakcji.

Notatka

Pigułka nie ma własnej kostki: czyta swoich memberów z pierwszego związanego z kostką kafelka w Appce. W zupełnie nowej Appce bez kafelków inspektor to mówi, zamiast zgłaszać pusty poziom.

Notatka

Rozwijana lista przestaje być używalna gdzieś przy paruset pozycjach, więc pigułka zasilana z kostki ogranicza swoją listę. Gdy poziom jest większy, inspektor mówi dokładnie, ile memberów znalazł i ilu zaoferuje — nigdy nie pokazuje się częściowej listy tak, jakby była całym poziomem. Dla tak dużego poziomu lepszą kontrolką jest kafelek filtra.

Plakietka Live

Wpisz sformułowanie, jakiego chcesz dla stanu połączonego („Live · Saiku”, „Connected to Acme BI”), a plakietka odzwierciedla faktyczną sondę backendu:

Stan	Pokazuje
Połączony	Twoje sformułowanie, na zielono
Instancja demo	„Demo data”, na bursztynowo
Nieosiągalny	„Offline”, na czerwono

Zostaw pole puste, by ukryć plakietkę zupełnie. Celowo zostaje neutralna, dopóki pierwsza sonda nie odpowie, zamiast twierdzić, że połączenie jest zdrowe, gdy tego nie potwierdziła.

Nawigacja

Zakładka Nav steruje menu:

• Umiejscowienie — lewa szyna albo górne zakładki.
• Startuj zwinięta — otwieraj szynę tylko z ikonami.
• Pełna wysokość — poprowadź szynę przez całą wysokość powłoki z nagłówkiem obok, zamiast nagłówka biegnącego górą. To wygląd powłoki produktu, w którym szyna jest najbardziej zewnętrzną oprawą.
• Stopka szyny — przypnij zębatkę ustawień oraz krążek użytkownika:

Krążek użytkownika	Pokazuje
Zalogowany użytkownik	inicjały wyprowadzone z tego, kto ogląda
Stały	te same inicjały dla wszystkich — makieta albo współdzielony kiosk
Wyłączony	brak krążka

Wskazówka

Wybieraj Zalogowany użytkownik. Stały krążek oznacza każdego oglądającego inicjałami jednej osoby, co czyta się jak błąd w chwili, gdy Appkę otworzy ktoś inny.

Asystent

Zakładka Assistant konfiguruje opcjonalny wbudowany panel Ask — czat w języku naturalnym zakresowany do kostki Appki:

• Włącz go, ustaw tytuł („Ask FoodMart”), personę i notkę o zakresie.
• Napisz otwierające powitanie.
• Wybierz ikonę nagłówka (iskierki albo celownik).
• Dodaj sugerowane prompty i chipy skilli (skróty ⌘) edytorami list.
• Ustaw podpowiedź w stopce kompozytora i atrybucję.

Strony

Zakładka Pages zarządza stronami Appki i ich tytułami:

• Dodaj stronę i ustaw tytuł nawigacyjny oraz ikonę każdej z nich.
• Nadaj stronie nagłówek, podtytuł i wyrównaną do prawej metę — pas tytułowy, który otwiera stronę (np. Portland #14 · Today / Regional manager view / Thu · Week 41).

Wartości na żywo w tekście strony

Nagłówek wpisany jako zwykły tekst jest zamrożony w chwili, gdy go napisałeś — wciąż będzie mówił „Portland #14”, gdy Appka jest zakresowana na Seattle, i „Thu · Week 41” na zawsze. Nagłówki, podtytuły i linie mety przyjmują więc wiązania, rozwiązywane przy każdym renderowaniu strony:

Wiązanie	Rozwiązuje się na
{context}	bieżący wybór pigułki kontekstu
{filter:Store}	bieżący wybór dla nazwanego wymiaru
{user.name}	zalogowany użytkownik
{user.initials}	jego inicjały
{app.name}	nazwa Appki
{date}	dzisiejsza data
{date:weekday}	nazwa dnia — Thu
{date:month}, {date:year}	October, 2026
{week}	numer tygodnia ISO

Nagłówek {context} · Overview idzie więc za selektorem sklepu, a linia mety {date:weekday} · Week {week} jest zawsze dzisiaj. Rozwiń Wstaw wartość na żywo pod polem mety, by zobaczyć listę, i kliknij jedną, by ją skopiować.

Notatka

Cokolwiek nie jest rozpoznanym wiązaniem, użyte jest dosłownie — literówka {user.nmae} wyrenderuje się tak, jak stoi, zamiast zniknąć, więc literówkę widać. Napisz {{ dla dosłownego nawiasu klamrowego.

Zaawansowane — własny CSS

Presety i tokeny pokrywają zdecydowaną większość brandingu. Na rzadki przypadek z długiego ogona zakładka Theme ma rozwijkę Zaawansowane — własny CSS.

Wskazówka

Sięgaj po nią późno. Referencyjna Appka FoodMart Ops, która idzie razem z Saiku — markowy nagłówek, szyna ikon, rząd KPI, umotywowany wykres trendu, rankingowa karta „Movers” i wbudowany asystent — nie zawiera żadnego własnego CSS-a. Jeśli łapiesz się na pisaniu selektorów, by przekształcić kafelek, zwykle jest typ kafelka albo token, który robi to porządnie, a tamta wersja przeżyje zmianę motywu, której ręcznie pisany CSS nie przeżyje.

Notatka

Własny CSS jest zawsze sanityzowany i zakresowany do tej Appki, zanim zostanie zastosowany — nie wycieknie do reszty interfejsu Saiku, a niebezpieczne konstrukcje są odrzucane, a nie stosowane częściowo. Do standardowego brandingu nie powinien być potrzebny.

Powiązane

• Przegląd App Buildera — czym jest Appka i czym różni się od dashboardu.
• Budowanie stron i kafelków — dodawaj strony, upuszczaj kafelki i wiąż je ze swoimi kostkami.
• Osadzanie Appki — umieść umotywowaną Appkę na dowolnej stronie WWW.