Chapitre 11 - Cours - Affichage des données avec la grille de données et la première formule

‍

‍

Étape 1 - Affichage des données dans une grille de données

Faites glisser et déposez un composant DataGrid dans votre page.

Cliquez dessus pour ouvrir les paramètres, puis sélectionnez Configurer. Choisissez ici la table de base de données que vous souhaitez afficher et confirmez.

Lorsque vous passez à l'aperçu, les données de votre tableau s'affichent directement dans la grille de données. Si votre tableau contient des images, vous remarquerez peut-être qu'elles sont très grandes et qu'elles déforment la mise en page.

‍

‍

Étape 2 - Fixation de la taille de l'image dans le tableau

Pour résoudre ce problème, revenez en mode édition, ouvrez les paramètres de la grille de données et cliquez sur le bouton A à droite pour passer aux paramètres avancés.

Faites défiler la page jusqu'en bas et repérez le bouton appelé "toggle" :

"Autosize Columns Width to the content of the cells, potentially enabling horizontal scrolling" (Taille automatique de la largeur des colonnes en fonction du contenu des cellules, ce qui peut permettre un défilement horizontal).

Désactivez cette option. Une fois validées, vos images seront automatiquement redimensionnées pour s'insérer dans la grille de données sans déborder.

‍

‍

Étape 3 - Création de la première formule

Ajoutons maintenant un peu de logique d'entreprise.

Allez dans la catégorie Actions dans la barre latérale, et glissez-déposez un composant Formule dans l'onglet Formules de votre projet.

Dans l'éditeur de formule, nous allons faire référence à la colonne Score d'humeur de notre grille de données (Grid1). Comme cette colonne a un espace dans son nom, nous devons l'écrire exactement comme suit :

fields["grid1"]["Mood Score"]["value"]

Cette fonction renvoie le score d'humeur de la ligne sélectionnée dans le tableau.

‍

‍

Étape 4 - Affichage du résultat de la formule

Pour montrer le résultat à l'utilisateur, faites glisser un composant Description dans la page.

Ouvrez ses paramètres et, dans le champ de valeur, faites glisser la formule que vous venez de créer.

Revenez au mode Aperçu. Désormais, lorsque vous sélectionnez une ligne dans la grille de données, la description ci-dessous affiche dynamiquement la valeur du score d'humeur grâce à votre formule.

‍

‍

Avec ces étapes, vous avez appris :

• Comment connecter une grille de données à votre base de données,
• Comment fixer la taille des images à l'aide de paramètres avancés,
• Comment créer et utiliser votre première formule pour afficher des données dynamiques.

Dans le prochain cours, nous développerons cette logique pour créer des formules plus avancées qui peuvent réagir à des conditions, combiner plusieurs champs et afficher des résultats calculés.

‍

‍