.svg)
Chapitre 5 - Utiliser votre base de données interne dans l'application
Apprenez à connecter la base de données interne que nous avons créée au chapitre 3.
Dans cette leçon, nous allons apprendre à connecter la base de données interne que nous avons créée au chapitre 3 à une page réelle de notre application. L'objectif est de récupérer et d'afficher des données réelles automatiquement, dès le chargement de la page, sans aucun code.
Pour commencer, allez dans le panneau des composants sur la gauche et faites glisser un composant Table sur le canevas. Ce tableau servira de visuel principal pour présenter le contenu de votre base de données aux utilisateurs.
puis connectons la base de données à notre composant table !
Partie 2 : Afficher et filtrer dynamiquement le contenu de la base de données interne
nous allons maintenant rendre le contenu de la base de données interne plus dynamique en ajoutant des filtres et de l'interactivité. Il s'agit de permettre aux utilisateurs de choisir le type de données qu'ils souhaitent voir, par exemple en sélectionnant un département spécifique, une note d'humeur ou une période de temps.
Dans la prochaine vidéo, nous allons montrer comment lier un composant de liste déroulante à une source de données. Tout d'abord, nous faisons glisser la liste déroulante sur la page dans le constructeur. Une fois la liste déroulante sélectionnée, nous activons l'option de source de données, puis nous cliquons sur le bouton Configurer qui apparaît en dessous. Le panneau de configuration s'ouvre ; nous choisissons ici la base de données interne créée précédemment et sélectionnons la table qui contient nos données. Dans la liste des colonnes, nous choisissons "Département", en le définissant à la fois comme étiquette d'affichage et comme valeur stockée. Après avoir confirmé la sélection, nous fermons le panneau de configuration et passons à l'aperçu en direct. La liste déroulante se charge maintenant automatiquement, affichant chaque département extrait de la base de données.
Connecter un composant de sélection à une source de données
Renommez laliste déroulante pour que votre projet reste clair et facile à maintenir.
Avant de poursuivre, il est conseillé de renommer la liste déroulante afin que votre projet reste clair et facile à maintenir. Cliquez sur la liste déroulante pour ouvrir son panneau de configuration à droite. Dans la petite barre d'icônes, vous verrez un bouton avec la lettre A. Cliquez dessus pour passer en mode avancé ; l'icône se transforme en S. Faites défiler jusqu'en bas du panneau de configuration et vous trouverez le champ où vous pouvez changer le nom du composant. Remplacez le nom générique "input1" par quelque chose d'explicite, par exemple departmentDropdown. Un nom clair facilite la lecture de la logique future, en particulier dans les applications de grande taille.
Filtrer un tableau à l'aide d'un composant de sélection
Maintenant que notre composant déroulant est connecté à la base de données et qu'il affiche tous les départements, nous allons l'utiliser pour filtrer les données affichées dans notre tableau. L'idée est simple : lorsque l'utilisateur sélectionne un département dans la liste déroulante, le tableau doit être mis à jour pour n'afficher que les lignes correspondant à ce département.
Pour ce faire, ouvrez la configuration du composant table. Descendez jusqu'à la section Filtres. Ajoutez un nouveau filtre en sélectionnant la colonne département comme champ à filtrer. Pour la condition, choisissez est. Ensuite, faites glisser et déposez le composant de liste déroulante dans le champ de valeur.
Ce que nous venons de faire, c'est dire à la table : "N'afficher que les lignes dont le département correspond à la valeur sélectionnée dans la liste déroulante". Une fois que vous aurez confirmé la configuration et prévisualisé l'application en temps réel, vous verrez qu'elle fonctionne immédiatement. Lorsque vous sélectionnez "Finance" dans la liste déroulante, seules les lignes dont le département est "Finance" seront affichées dans le tableau. Cela rend votre interface dynamique et conviviale, et tout cela sans une seule ligne de code.