Le widget La grille permet d’afficher de manière structurée (lignes et colonnes) les informations de plusieurs éléments et d’obtenir une vision sous forme de tableau avec des intitulés de colonnes et des données à l’intérieur.
Anatomie
...
Titre du widget grille
...
Contextes d’utilisation
La grille peut être utilisée dans différents contextes :
CRUD
widget (une documentation spécifique aux widgets est consultable ici : https://divalto.atlassian.net/wiki/x/N4BdkwI)
Anatomie
...
Titre de la grille
Contenu de la grille composé de plusieurs
...
éléments :
Entêtes Entête de colonne
Colonne primaire avec primary link
Colonne standard
Usage
Afficher des éléments avec plusieurs champs qu’il faut pouvoir distinguer
...
Afficher des données chiffrées que l’utilisateur doit pouvoir comparer facilement entre elles
...
Préfiltrage
Les grilles doivent être préfiltrées pour les contextualiser à la page courante (fiche ou page d’accueil)
...
Entête de colonne
Les widgets grilles doivent obligatoirement avoir des intitulés de colonnes dans les widgets grilles.
Indiquer les libellés de colonnes plutôt que les codes de colonnes sauf si les codes sont plus pertinentsEviter d’utiliser des abréviations dans les intitulés de colonnes.
Colonne primaire et primary link
...
Le primary link permet d’ouvrir le détail de l'élément en popup.
Colonne standard
Colonnes de type nombre montant : pour faciliter la lecture, elles doivent inclurent un formatage des données et :
un espacement entre les milliers.
un nombre de décimal identique.
Grille vs Liste
...
Grille
...
Liste
...
Nombre d'éléments max
...
illimité
...
10 max
...
Nombre de champs max (pour chaque élément)
...
illimité
...
6 max
...
Primary link
...
✅
...
✅ obligatoire
...
Scroll horizontal
...
❌
...
❌
...
Action “en voir plus”
...
❌
...
✅
...
Libellé du champ
...
✅
...
❌
...
Paginer les éléments
...
❔
...
❌
...
Trier les éléments (utilisateur final)
...
❌
...
❌
...
Filtrer les éléments (utilisateur final)
...
❌
...
❌
...
Afficher/masquer un champ (utilisateur final)
...
❌
...
❌
...
Redimensionner un champ (utilisateur final)
...
❌
...
❌
...
Groupements d'éléments
...
✅
...
❌
...
Agrégation de champs
...
✅
...
❌
...
Filtrer et trier des colonnes
Le métier a la possibilité d’activer ou non la capacité pour les utilisateurs de filtrer ou trier une ou plusieurs colonnes selon le contexte dans les grilles que ce soit dans un contexte de grille ou de widget.
Les intitulés des colonnes paramétrés apparaitront de cette manière là :
...
Actions au clic
Au clic sur une ligne, je veux pouvoir ouvrir dans une popup l’entité que je viens de pointer.
Exemple :
A partir d’une grille présentant les contrats actifs, je veux pouvoir ouvrir en popup la fiche du contrat concerné.