Vitrine des composants
En bref
L'écran Outils est une vitrine propre à la webapp : 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 la webapp 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. L'application n'a pas d'équivalent.
Disponibilité
| Fonction | Webapp | Application |
|---|---|---|
| Écran Outils (listes, graphiques, design system) | oui | non |
| Section Outils des réglages | oui | non |
| Exemples branchés sur vos documents de vente | oui, deux exemples en lecture | non |
| Travailler sans connexion | non | sans objet |
Accéder à l'écran
Menu Outils de la webapp, placé en bas du menu, dans les deux mondes. 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 la webapp.
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 ses vingt-cinq 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, Iconographie |
| 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 Outils au panneau des Paramètres. Elle contient un seul interrupteur, Exemple de réglage - ne change rien dans l'application, qui ne sert qu'à illustrer comment un écran enregistre ses propres réglages. Activé, il affiche l'encart Option activée, toujours présent après un rechargement de la page ; la valeur retenue est rappelée en clair sous l'interrupteur.
À 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.
Hors connexion
La webapp travaille toujours en ligne ; la vitrine n'enregistre aucune donnée métier.
Sur téléphone et tablette
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 la webapp. Un utilisateur peut néanmoins y découvrir le fonctionnement des listes et des graphiques qu'il retrouve partout ailleurs.