Utiliser Grid pour créer un tableau

Introduction

Dans cet exemple, le tableau donnera aux utilisateurs le nombre d’articles vendus par produit et calculera le pourcentage des ventes attribué par produit.

Étapes à suivre

1. Créer un champ « Sold » et une commande de mise à jour

Avant de créer le tableau, nous devons créer des données. Créez un nouveau champ « sold », de type number et ajoutez-le comme champ obligatoire à une nouvelle commande de mise à jour. Dans cet exemple, le nom de la commande sera « sellProduct » et le type d’événement « PRODUCT_SOLD ».

2. Définir un champ calculé pour le ratio des ventes de produits

Créez un champ Computed et nommez-le « ratioProductSales » et sélectionnez le type text. Dans la section code, entrez ceci :

(data.sold / _.sumBy(db.Product.all.map('sold')) * 100).toFixed(2)

3. Ajouter les champs et la commande à la page de détail du produit

Ajoutez les 2 champs et la commande créés aux étapes 1 et 2 à la page de détail du produit. À ce stade, créez des données en entrant combien de chaque produit a été vendu.

4. Configurer la page de liste des produits

Créez une nouvelle page de liste de produits et supprimez la liste de l’interface utilisateur. Associez la page nouvellement créée à la page Product Sold.

5. Configurer le composant Grid pour le tableau

Depuis la toolbox, glissez-déposez un composant « grid » et utilisez l’icône + pour ajouter une autre colonne au tableau.

6. Créer les titres de colonnes avec des composants Text

Utilisez un composant text pour créer les titres de colonnes de votre tableau. Glissez-déposez simplement le composant dans chaque boîte de la rangée supérieure et changez leur valeur pour : Product, Sold and.

7. Ajuster les rangées du Grid pour optimiser la mise en page

Changez la première rangée de 1fr à min-content.

8. Utiliser un Repeater pour l’affichage des produits

Glissez-déposez l’Aggregate Product sous le grid, en utilisant le panneau Structure et affichez-le comme repeater. Ensuite, enveloppez-le dans une boîte verticale et glissez-le dans la deuxième boîte de la première colonne.

9. Aligner les champs avec les titres de colonnes dans le Grid

Étirez la colonne pour qu’elle prenne toute la largeur du grid.

10. Finitions et style

Sélectionnez la boîte dans le repeater, contenant les champs Product et, depuis l’onglet Attribute, changez son orientation en Horizontal.

Supprimez tous les champs du repeater sauf le nom du produit.

Pour ajouter « sold » et « ratioProductSales », quittez le mode « edit grid » :

Pour aligner les champs avec les titres de colonnes, insérez un nouveau composant grid dans la boîte contenant les champs du repeater. Activez le mode « edit » du deuxième grid pour ajouter une colonne et supprimer la deuxième rangée. Ensuite, changez la première rangée de 1fr à min-content et déplacez le champ correspondant sous le titre correspondant. Fermez le mode « edit » du grid pour voir que les colonnes sont presque parfaitement alignées avec leur titre.

Pour corriger le léger problème d’ajustement, supprimez simplement le style par défaut appliqué à la boîte à l’intérieur du repeater.

Voici à quoi cela ressemblerait après l’ajout de quelques éléments de style et d’une colonne supplémentaire pour « total price ».

Conclusion

Ce guide démontre comment utiliser un composant grid pour créer un tableau dynamique affichant les données de ventes de produits, incluant des champs comme les noms de produits, les quantités vendues et les ratios de ventes. En suivant ces étapes, vous pouvez structurer et styliser efficacement un tableau pour une présentation de données claire et organisée.