Data Viewer Grid (Grille de visualisation des données)
Créer des applications puissantes, sans code, orientées données, connectées directement à Google Sheets, Airtable, ou stockées localement.
Vue d'ensemble
Les composants du visualiseur de données vous permettent de créer de belles interfaces utilisateur pour vos données. Tout cela se fait en seulement 3 étapes, sans aucun bloc nécessaire !
Vous pouvez ajouter des fonctionnalités supplémentaires à la grille de visualisation des données en utilisant les blocs de composants inclus ou vous pouvez travailler directement avec vos données brutes en utilisant les blocs de sources de données.
Tutoriel vidéo
Exemple d'application
Consultez l'exemple de notre application pour les équipes de hockey pour voir la grille du Data Viewer en action. Cliquez sur le bouton "Copier le projet" si vous souhaitez réutiliser cet échantillon open-source pour vous-même.
Si vous avez des commentaires à nous faire sur les composants du Data Viewer, veuillez nous en faire part dans la communauté Thunkable.
Source des données
Pour commencer à utiliser le Data Viewer, vous devez préciser où vos données sont stockées. Thunkable vous offre trois options de stockage différentes.
Vous pouvez utiliser Google Sheets ou Airtable pour stocker des données dans le nuage. Vous pouvez également créer votre propre table. C'est l'idéal si vous souhaitez un accès local et hors ligne à vos données. La création de votre propre tableau est également le moyen le plus rapide et le plus simple de commencer à utiliser le visualiseur de données.
Dans les propriétés du composant Data_Viewer_List, cliquez sur le bouton Add. Dans le pop-up, vous pouvez choisir une source de données existante. Si c'est la première fois que vous utilisez le Data Viewer, vous pouvez en créer une nouvelle en cliquant sur le bouton Create New.
Dans le pop-up suivant, choisissez entre Créer votre propre table, Airtable ou Google Sheets comme source de vos données.
Veuillez noter que certains utilisateurs ont signalé des problèmes de connexion à Google Sheets s'ils utilisent des comptes G Suite for Education. Le moyen le plus rapide de contourner ce problème est, pour l'instant, d'utiliser un compte Gmail personnel. Si vous avez besoin d'un groupe ou d'une classe importante pour utiliser cette fonctionnalité, vous devrez peut-être contacter votre administrateur G Suite pour revoir vos paramètres de sécurité.
Pour l'instant, la connexion aux fichiers .xlsx hébergés sur Google Sheets n'est pas prise en charge. Vous pouvez convertir votre fichier .xlsx en une feuille Google avant de le connecter à votre projet d'application Thunkable. Il vous suffit d'ouvrir votre fichier .xlsx sur Google Sheets, puis de cliquer sur Fichier > Enregistrer sous Google Sheets.
Créez votre propre table
Commencez par nommer votre source de données.
Ensuite, sélectionnez le composant Data Viewer et cliquez sur le lien qui dit Click Here To Edit Data. Cela vous permet d'éditer les données de remplissage qui ont été automatiquement générées
L'éditeur de données vous permet de modifier, d'ajouter et de supprimer des colonnes d'informations. Pour modifier l'une des valeurs individuelles, il suffit de cliquer sur la cellule et de taper ce que vous voulez.
Airtable
Dans Airtable, une base est considérée comme la source de données. L'ajout d'une Airtable est très simple.
Pour commencer, copiez votre clé API depuis la page de votre compte Airtable. Une clé API Airtable est un code de 14 caractères qui commence par les trois lettres "key". Collez cette clé dans Thunkable et cliquez sur le bouton Refresh pour voir la liste de vos bases Airtable.
Choisissez la base que vous souhaitez utiliser comme source de données et cliquez sur Create.
Si vous êtes nouveau à Airtable, vous pouvez en lire plus dans notre documentation Airtable.
Google Sheets
Dans Google Sheets, le document entier est considéré comme la source de données.
Pour pouvoir utiliser Google Sheets, la première ligne de votre feuille doit être une ligne d'en-tête.
Pour connecter un Google Sheet, connectez-vous et autorisez votre projet Thunkable à accéder à votre Google Drive.
Une fois que vous l'aurez autorisé, vous verrez une liste de feuilles de calcul dans votre Google Drive. Si vous ne voyez pas la feuille que vous recherchez, vous pouvez passer à l'affichage de la liste, la trier par ordre alphabétique ou rechercher celle dont vous avez besoin. Cliquez sur Select pour revenir à votre projet Thunkable.
Enfin, donnez un nom à votre source de données et vous êtes prêt à partir.
Mises en page
Image avec superposition partielle du titre
Titre seulement
Sous-titre de l'image (aligné à gauche)
Image et titre
Sous-titre de l'image (aligné au centre)
Titre de l'image circulaire Sous-titre
Image avec superposition du titre
Mise en page personnalisée
Vous pouvez également concevoir une présentation personnalisée du visualiseur de données et l'enregistrer avec le type de présentation "Grid" pour l'utiliser dans votre grille de visualisation des données.
Liaisons de données
Enfin, vous devez spécifier manuellement quelles colonnes de votre source de données correspondent à quels caractères de remplissage dans la présentation choisie. Chaque présentation aura son propre ensemble spécifique de liaisons de données.
Par exemple, si vous utilisez la présentation "Titre seulement", vous n'aurez qu'une seule liaison de données, la propriété "Titre".
Blocs
Item Click (Cliquez sur)
L'événement Item Click est déclenché lorsqu'une carte du Data Viewer est cliquée. Il renvoie un identifiant de ligne qui correspond à l'identifiant unique de la carte sur laquelle le clic a été effectué. L'identifiant de ligne est particulièrement utile lorsqu'il est utilisé avec les blocs Data Source.
Height / Width (Hauteur et largeur)
Les blocs suivants vous permettent de travailler avec les propriétés de hauteur et de largeur du Data Viewer.
Visible
L'ensemble du visualiseur de données peut être complètement masqué ou affiché en réglant la propriété Visible sur "false" ou "true", respectivement.
Rafraîchir
Rafraîchissez la grille de visualisation des données pour la synchroniser avec la source de données.
Sources de données
Lorsque vous connectez une source de données à votre projet, vous avez également accès à un deuxième tiroir de bloc. Ces blocs Data Source vous permettent d'effectuer diverses opérations CRUD (Create, Read, Update, Delete) sur vos données.
Cliquez sur le lien ci-dessous pour savoir comment utiliser les blocs Sources de données dans votre projet.
Last updated
