Composant Grid

Grid découpe une page en zones réactives, stables et réutilisables. Il convient aux tableaux de bord, aux fiches détaillées, aux pages avec contenu principal et barre latérale, ainsi qu’aux groupes de cartes de même largeur. Chaque zone peut contenir un Form, un Common Panel, un ProTable, un DataList ou un autre composant.

1. Exemple : tableau de bord d’une campagne

La page Grid de Spark Sample présente trois dispositions courantes :

Ligne	Largeurs	Usage
Equal Thirds	8 + 8 + 8	Trois indicateurs de même largeur
Main and Sidebar	16 + 8	Détails de campagne et liste de contrôle
Equal Halves	12 + 12	Planning et audience

Screen
└── Grid
    ├── Row → 8/24 + 8/24 + 8/24
    ├── Row → 16/24 + 8/24
    └── Row → 12/24 + 12/24

L’exemple utilise des valeurs initiales et ne nécessite pas d’API backend. Pour charger des données réelles, placez un Data Form, un DataList ou un ProTable dans les colonnes.

2. Structure à trois niveaux

1. Grid définit la répartition horizontale et l’alignement vertical.
2. Grid Row représente une ligne et définit l’espacement entre colonnes et entre lignes après retour à la ligne.
3. Grid Column occupe une partie des 24 colonnes et contient les composants métier.

Respectez l’ordre suivant :

Grid → Grid Row → Grid Column → Common Panel / Form / composant de données

3. Ajouter un Grid

1. Ouvrez la page dans Page Designer et sélectionnez Screen.
2. Ajoutez Grid dans la zone enfant Grid de Screen.
3. Ajoutez un Grid Row dans Rows.
4. Ajoutez une ou plusieurs Grid Columns dans Columns.
5. Définissez Span Columns pour chaque colonne.
6. Ajoutez un Common Panel, Form, ProTable ou autre composant dans Panels.
7. Enregistrez puis contrôlez l’aperçu et la page exécutée.

Une nouvelle colonne occupe par défaut 24/24, ce qui la rend immédiatement visible.

4. Grille sur 24 colonnes

Span Columns accepte une valeur de 1 à 24.

Disposition	Valeurs
Pleine largeur	24
Deux zones égales	12 + 12
Trois zones égales	8 + 8 + 8
Quatre zones égales	6 + 6 + 6 + 6
Contenu principal et barre latérale	16 + 8 ou 18 + 6

La somme vaut généralement 24. Une somme inférieure laisse de l’espace libre, placé selon Horizontal Alignment. Une somme supérieure à 24 renvoie les dernières colonnes à la ligne suivante. Column Gap est un espacement visuel : il ne faut pas le soustraire de 24.

5. Espacements et alignements

Sur Grid Row :

Propriété	Valeurs	Rôle
Column Gap	0–64	Espacement horizontal entre colonnes, en pixels
Row Gap	0–64	Espacement vertical après un retour à la ligne, en pixels

Sur le Grid externe :

• Horizontal Alignment : start, end, center, space-between ou space-around.
• Vertical Alignment : top, middle ou bottom.

Si la somme des largeurs vaut 24, il n’y a plus d’espace horizontal libre et les alignements horizontaux peuvent sembler identiques. Testez temporairement avec 8 + 8. L’alignement vertical n’est visible que lorsque les colonnes ont des hauteurs différentes.

6. Hauteur minimale

Minimum Column Height accepte 0 à 1200 pixels :

• 0 adapte la hauteur au contenu ; c’est le réglage recommandé par défaut.
• Une valeur positive réserve une hauteur minimale. Un contenu plus grand agrandit toujours la colonne et n’est pas coupé.

Utilisez la même valeur sur plusieurs colonnes lorsque leurs cartes doivent paraître équilibrées. Il ne s’agit pas d’une hauteur maximale.

7. Contenu des colonnes

• Common Panel + Form : carte de détail ou d’indicateur avec titre.
• Form : zone de saisie sans titre de carte supplémentaire.
• ProTable / DataList : liste principale, filtres ou barre latérale.
• Tree : utilisez normalement la zone Navigation Tree de Screen ; placez-le dans Grid uniquement s’il s’agit d’un contenu ordinaire.

Grid définit la largeur de la zone. Controls Per Row et Form Grid Split restent calculés à l’intérieur de cette zone et non sur les 24 colonnes de la page.

8. Reproduire l’exemple

1. Ajoutez un Grid avec start et top.
2. Ajoutez une ligne avec Column Gap et Row Gap à 16.
3. Ajoutez trois colonnes 8 + 8 + 8, chacune avec une hauteur minimale de 156.
4. Ajoutez une ligne 16 + 8, avec une hauteur minimale de 228.
5. Ajoutez une ligne 12 + 12, avec une hauteur minimale de 176.
6. Placez un Common Panel et un Form en lecture seule dans chaque colonne.
7. Enregistrez et réduisez la largeur de la fenêtre pour vérifier l’empilement mobile.

9. Comportement réactif

Sur PC, les largeurs suivent les 24 colonnes. Sur téléphone ou écran étroit, les colonnes s’empilent dans leur ordre de configuration afin de rester lisibles. Le JSON et les valeurs Span Columns ne sont pas modifiés ; la disposition d’origine revient lorsque la fenêtre s’élargit.

10. Backend et interactions

Grid est uniquement un composant de mise en page et n’envoie aucune requête. Un backend Java n’est nécessaire que si un composant enfant charge des données ou exécute une Interaction. Les requêtes de page transportent automatiquement l’environnement et le mode de rendu ; consultez Contexte des requêtes et débogage backend.

Configurez les interactions sur le bouton, le champ, la carte ou le composant de données concerné, et non sur Grid Row ou Grid Column.

11. Résolution des problèmes

• Les colonnes passent à la ligne : vérifiez que la somme des Span Columns ne dépasse pas 24.
• Horizontal Alignment ne change rien : essayez une ligne 8 + 8 qui laisse de l’espace libre.
• Vertical Alignment ne change rien : utilisez deux colonnes de hauteurs différentes.
• Les libellés du Form sont incorrects : configurez d’abord la largeur de la colonne, puis le découpage interne du Form.
• L’aperçu et l’exécution diffèrent : enregistrez la page et vérifiez que l’URL utilise le versionId actuel.