Vitrine des composants¶
En bref
L'écran Outils est une vitrine : il ne gère aucune donnée métier et ne sert à personne dans son travail quotidien. Il présente, sur des exemples, les briques dont l'application est faite — listes et graphiques dynamiques SenSaaS, et le design system. Il s'adresse aux équipes qui construisent ou intègrent SenSaaS, et sert de support de formation.
Accéder à l'écran¶
Menu › Outils. L'entrée est placée en bas du menu. Quatre destinations sont proposées, et une rangée d'onglets permet de passer de l'une à l'autre :
| Destination | Ce qu'elle montre |
|---|---|
| SenSaaS Grid | Une liste dynamique complète, sur des données fictives |
| Grid Modes | Les six façons de charger et de totaliser une liste |
| SenSaaS Charts | Quatre familles de graphiques |
| Design System | Les couleurs, composants et modèles d'écran de SenSaaS |
Capture à venir
Vitrine des composants SenSaaS — identifiant application/demo-design-system. L'image sera ajoutée lors de la prochaine campagne de captures.
SenSaaS Grid¶
Une liste de douze produits fictifs, avec six colonnes : ID, Produit, Catégorie, Prix, Stock, Statut. Tout y est actif : tri et filtre sur chaque colonne, pagination à dix lignes, et coloration du statut — vert pour En stock, ambre pour Stock faible, rouge pour Rupture.
C'est la démonstration de la liste dynamique utilisée partout ailleurs dans l'application.
Grid Modes¶
Six exemples vivants, chacun accompagné de son explication : ils montrent comment une liste charge ses données et présente ses totaux selon le volume.
| Mode | Ce qu'il illustre |
|---|---|
| 1. Adaptatif (standard) | Le comportement par défaut : tout charger quand le volume le permet, passer au chargement par blocs au-delà. Cet exemple est branché sur les documents de vente réels de votre dossier, et affiche le mode retenu et le nombre de documents |
| 2. Pagination serveur (vues cards) | La pagination indépendante utilisée sous les vues en cartes |
| 3. Regroupement côté serveur | Regroupement, totaux et croisement calculés par le serveur, ici sur de vraies pièces (Tiers × Type) |
| 4. Pagination dans le navigateur | Cent lignes fictives, entièrement gérées côté navigateur |
| 5. Barre de totaux sans pagination | Vingt lignes, avec des totaux toujours visibles |
| 6. Regroupement et agrégations | Trente factures fictives, avec regroupement, croisement et fonctions de calcul |
Les exemples branchés sur de vraies données affichent « Sélectionnez un dossier Sage pour charger les données. » tant qu'aucune société n'est cochée.
SenSaaS Charts¶
Quatre graphiques présentés en grille :
- un graphique en barres comparant chiffre d'affaires et charges sur six mois ;
- un graphique en secteurs répartissant cinq catégories ;
- une courbe d'évolution du nombre de clients sur six mois ;
- un graphique en aires de marge brute sur six mois.
Toutes les données sont fictives.
Design System¶
C'est la partie la plus fournie : une bibliothèque vivante de tout ce qui compose l'interface. Un sommaire latéral range les sections en quatre catégories ; chaque section présente un aperçu interactif à gauche et l'extrait de code correspondant à droite.
| Catégorie | Sections |
|---|---|
| Fondations | Couleurs, Typographie, Espacements & ombres, Animations, Logos |
| Composants | Boutons, Formulaires, Sélection & recherche, Feedback, Navigation, Overlays & menus, KPI, Detail layout, Editor layout |
| Patterns | Remote header, Contexte & statuts, Cards, Liste mobile, Slots (injection), Société / exercice |
| Data | API, SenSaaS Grid, Grille éditable, SenSaaS Charts |
La section Couleurs affiche les teintes réellement appliquées : elle suit donc le thème clair ou sombre et la personnalisation que vous avez choisis dans les Réglages. Chaque section a sa propre adresse, ce qui permet d'envoyer un lien direct vers un composant précis.
Une section dans les Réglages¶
Cet écran ajoute sa propre section Demo au panneau des Paramètres. Elle contient un interrupteur de démonstration, Option de démonstration, qui ne sert qu'à illustrer comment un écran enregistre ses propres réglages. La valeur retenue y est rappelée en clair.
À qui cela sert¶
- Aux développeurs de l'écosystème SenSaaS : c'est la référence de ce qui existe déjà, à réutiliser plutôt qu'à réécrire, et le support d'apprentissage des nouveaux arrivants.
- Aux intégrateurs : pour voir à quoi ressemblent les écrans avant de les configurer.
- Aux équipes produit : pour vérifier qu'un nouvel écran respecte les conventions visuelles.
Aucune donnée réelle, sauf mention
Les seuls exemples branchés sur vos données Sage sont deux des six modes de liste, qui lisent des documents de vente en consultation. Tout le reste est fictif, et rien n'est écrit dans vos dossiers.
Sur mobile¶
Le design system est utilisable sur téléphone : le sommaire latéral laisse place à un sélecteur Sections. Les graphiques passent en une seule colonne. Une section entière, Liste mobile, est consacrée aux composants tactiles employés dans les écrans de listes.
Questions fréquentes¶
Puis-je retirer l'entrée Outils du menu ?
Oui : Paramètres › Navigation › Ordre des menus, puis Masquer sur l'entrée Outils. L'écran reste accessible par son adresse.
Les chiffres de cette vitrine sont-ils les miens ?
Presque jamais. Seuls deux exemples de la page Grid Modes lisent vos documents de vente, en consultation. Tout le reste est fictif.
En quoi est-ce utile à un utilisateur métier ?
Peu, directement. C'est un outil pour les équipes qui construisent l'application. Un utilisateur peut néanmoins y découvrir le fonctionnement des listes et des graphiques qu'il retrouve partout ailleurs.