Design et thématisation

Tout ce qui donne son caractère à une App — ses couleurs, ses polices, son en-tête, l’habillage de navigation et l’assistant intégré — s’édite graphiquement, sans JSON ni CSS. Tout cela tient derrière un seul contrôle : Design.

Ouvrir l’inspecteur de design

Une App s’ouvre à fond perdu en mode lecture — la surface propre et publiée que voit votre public, sans habillage d’édition. Pour modifier, cliquez sur Éditer dans l’en-tête, puis sur Design. Un panneau glisse depuis la droite avec cinq onglets :

Theme · Header · Nav · Assistant · Pages

Chaque changement se prévisualise en direct sur l’App derrière le panneau. Enregistrez quand cela vous convient.

Astuce

Double-cliquez sur l’en-tête de l’App pendant l’édition pour sauter directement à l’onglet Header.

Thème

L’onglet Theme est d’où vient l’allure de l’App — un ensemble structuré de tokens de design, pas du CSS écrit à la main.

Préréglages

Partez d’un préréglage — une allure curatée et cohérente que vous appliquez en un clic :

Préréglage	Caractère
Editorial	Fond crème chaud, titres à empattements, accent vert
Minimal	Fond blanc, filets fins, aucune ombre
Dark Ops	Fond anthracite, surfaces surélevées, accent cyan
Corporate	Fond gris froid, accent bleu, cartes nettes

Choisir un préréglage rhabille l’App entière instantanément. C’est le chemin le plus rapide vers un résultat soigné ; affinez ensuite.

Décrivez votre marque

Vous préférez les mots aux nuanciers ? Tapez une description en langage courant — « warm editorial look, green accent, rounded cards » ou « dark control-room ops, cyan accent with amber highlights » — et cliquez sur Générer le thème. La description est analysée en un préréglage plus les couleurs, polices et formes qu’elle implique, et appliquée en direct.

Couleurs, typographie et forme

Sous les préréglages, ajustez les tokens directement :

• Couleurs — Accent, Marque (une couleur secondaire pour le logotype / le carré de logo), Fond, Cartes, Texte, et les couleurs Hausse / Baisse pour les valeurs positives / négatives.
• Typographie — une police de Titres et une de Corps, chacune issue d’une liste blanche curatée (les polices sont embarquées, jamais récupérées d’un CDN), plus Chiffres : quelle famille porte les nombres — titres de KPI et cellules numériques de tableau. Monospace garde les colonnes de chiffres alignées et donne cet air de grand livre qu’utilisent les produits de données ; les autres options renvoient à la famille des titres ou du corps, si bien que les changer se répercute.
• Forme — rayon des angles, profondeur d’ombre, densité (à quel point l’espacement est serré) et la barre de bord du KPI — réglez-la sur Tone pour colorer le bord gauche de chaque tuile KPI selon que le chiffre monte ou descend, pour qu’une rangée de KPI se lise d’un coup d’œil.

Tout token que vous réglez surcharge le préréglage ; les tokens intacts gardent la valeur du préréglage.

Les graphiques suivent le thème

Les tuiles graphiques peignent depuis les tokens de l’App, pas depuis l’interface Saiku alentour — changer de préréglage rethématise donc les graphiques avec tout le reste : couleurs de séries, libellés d’axes, lignes de grille et titres bougent ensemble.

Une tuile option ECharts écrite à la main est superposée par-dessus cette ligne de base thématisée. Ce que l’option énonce l’emporte ; ce qu’elle laisse tacite est hérité. En pratique, cela veut dire que vous n’écrivez que les parties du graphique réellement sur mesure, et la palette de l’App fait le reste.

En-tête

L’onglet Header contrôle la barre supérieure de marque :

• Nom de l’App et un mot d’accent optionnel — une sous-chaîne du nom rendue dans la couleur de marque (p. ex. « FoodMart Ops »).
• Eyebrow — une petite ligne en capitales après un séparateur (« Store Intelligence »).
• Pastille de contexte — un sélecteur étiqueté à droite (p. ex. Store · Portland #14). Voir plus bas.
• Badge Live — une puce d’état avec un point. Voir plus bas.

Pastille de contexte

La pastille est un vrai contrôle, pas une décoration : donnez-lui des options et un niveau sur lequel filtrer, et en choisir un recadre toutes les tuiles de l’App — sur toutes les pages, pas seulement celle que vous regardez. La sélection vous suit quand vous circulez entre les pages.

Réglez le Libellé (« Store ») et une Valeur par défaut, puis choisissez d’où viennent les options :

• Depuis le cube (recommandé) — tous les membres du niveau sur lequel la pastille filtre, lus en direct. Un magasin qui ouvre, ferme ou est renommé apparaît sans que personne édite l’App.
• Liste saisie — des options que vous écrivez à la main, pour les cas où vous voulez un sous-ensemble curaté ou une formulation plus aimable que les captions du cube.

Sous Filtre sur, nommez la dimension, la hiérarchie et le niveau auxquels la sélection s’applique. Laissez-les vides pour une pastille purement cosmétique — la sélection ne changera alors que le texte de l’en-tête.

Cochez Ajouter une entrée « tous » pour une ligne qui efface le filtre (formulez-la comme vous voulez — « All stores · National »).

La sélection courante voyage dans l’URL en ?ctx=…, si bien qu’un lien copié alors que vous êtes cadré sur une région s’ouvre cadré sur cette région. Un filtre au clic au niveau d’une tuile peut encore restreindre au-delà de la pastille sur la page où vous êtes — la pastille définit le cadrage de l’App, pas un plafond sur chaque interaction.

Note

La pastille n’a pas de cube propre : elle lit ses membres depuis la première tuile liée à un cube de l’App. Sur une App toute neuve sans tuiles, l’inspecteur le dit plutôt que de signaler un niveau vide.

Note

Une liste déroulante cesse d’être utilisable autour de deux ou trois centaines d’entrées, donc une pastille alimentée par le cube plafonne sa liste. Quand un niveau est plus gros que ça, l’inspecteur vous dit exactement combien de membres il a trouvés et combien seront proposés — on ne vous montre jamais une liste partielle comme si c’était le niveau entier. Pour un niveau de cette taille, une tuile filtre est le meilleur contrôle.

Badge Live

Tapez la formulation que vous voulez pour l’état connecté (« Live · Saiku », « Connected to Acme BI »), et le badge reflète une sonde réelle du backend :

État	Affiche
Connecté	votre formulation, en vert
Instance de démo	« Demo data », en ambre
Injoignable	« Offline », en rouge

Laissez le champ vide pour masquer complètement le badge. Il reste délibérément neutre tant que la première sonde n’a pas répondu, plutôt que de revendiquer une connexion saine qu’il n’a pas confirmée.

Navigation

L’onglet Nav contrôle le menu :

• Placement — rail à gauche ou onglets en haut.
• Démarrer replié — ouvrir le rail en icônes seules.
• Pleine hauteur — faire courir le rail sur toute la hauteur de la coquille avec l’en-tête à côté, plutôt que l’en-tête traversant le haut. C’est l’allure de coquille produit où le rail est l’habillage le plus extérieur.
• Pied du rail — épinglez une roue dentée de réglages, et un disque utilisateur :

Disque utilisateur	Affiche
Utilisateur connecté	les initiales de qui regarde
Fixe	les mêmes initiales pour tous — une maquette ou une borne partagée
Désactivé	pas de disque

Astuce

Préférez Utilisateur connecté. Un disque fixe badge chaque lecteur avec les initiales d’une seule personne, ce qui se lit comme un bug dès que quelqu’un d’autre ouvre l’App.

Assistant

L’onglet Assistant configure le panneau Ask intégré optionnel — un chat en langage naturel cadré sur le cube de l’App :

• Activez-le, réglez le titre (« Ask FoodMart »), la persona et la note de cadrage.
• Rédigez le message d’accueil.
• Choisissez l’icône d’en-tête (étincelles ou réticule).
• Ajoutez des prompts suggérés et des puces de skill (les raccourcis ⌘) avec les éditeurs de listes.
• Réglez l’indice de pied du compositeur et l’attribution.

Pages

L’onglet Pages gère les pages de l’App et leurs titres :

• Ajoutez une page, et réglez le titre de navigation et l’icône de chacune.
• Donnez à une page un titre, un sous-titre et un meta aligné à droite — le bandeau de titre qui ouvre la page (p. ex. Portland #14 · Today / Regional manager view / Thu · Week 41).

Valeurs en direct dans le texte de page

Un titre tapé en texte brut est figé au moment où vous l’avez écrit — il dira encore « Portland #14 » quand l’App est cadrée sur Seattle, et « Thu · Week 41 » pour toujours. Les titres, sous-titres et lignes meta acceptent donc des liaisons, résolues chaque fois que la page s’affiche :

Liaison	Se résout en
{context}	la sélection courante de la pastille de contexte
{filter:Store}	la sélection courante d’une dimension nommée
{user.name}	l’utilisateur connecté
{user.initials}	ses initiales
{app.name}	le nom de l’App
{date}	la date du jour
{date:weekday}	nom du jour — Thu
{date:month}, {date:year}	October, 2026
{week}	numéro de semaine ISO

Ainsi un titre {context} · Overview suit le sélecteur de magasin, et une ligne meta {date:weekday} · Week {week} est toujours aujourd’hui. Dépliez Insérer une valeur en direct sous le champ meta pour voir la liste, et cliquez sur l’une d’elles pour la copier.

Note

Tout ce qui n’est pas une liaison reconnue est utilisé littéralement — un {user.nmae} mal tapé s’affiche tel quel plutôt que de disparaître, vous voyez donc la faute. Écrivez {{ pour une accolade littérale.

Avancé — CSS personnalisé

Les préréglages et les tokens couvrent l’immense majorité de l’habillage. Pour le rare cas de longue traîne, l’onglet Theme a un dépliant Avancé — CSS personnalisé.

Astuce

N’y venez que tard. L’App de référence FoodMart Ops livrée avec Saiku — en-tête de marque, rail d’icônes, rangée de KPI, graphique de tendance thématisé, carte « Movers » classée et assistant intégré — ne contient aucun CSS personnalisé. Si vous vous surprenez à écrire des sélecteurs pour remodeler une tuile, il existe généralement un type de tuile ou un token qui le fait proprement, et cette version-là survivra à un changement de thème là où le CSS écrit à la main ne survivra pas.

Note

Le CSS personnalisé est toujours assaini et cadré sur cette App avant d’être appliqué — il ne peut pas fuir dans le reste de l’interface Saiku, et les constructions dangereuses sont supprimées plutôt qu’appliquées à moitié. Vous ne devriez pas en avoir besoin pour un habillage standard.

Liens connexes

• Vue d’ensemble d’App Builder — ce qu’est une App et en quoi elle diffère d’un dashboard.
• Construire pages et tuiles — ajoutez des pages, déposez des tuiles et liez-les à vos cubes.
• Intégrer une App — mettre une App thématisée sur n’importe quelle page web.