Data Viewer List (Liste de visualisation de données)
Créer des applications puissantes, sans code, orientées données, connectées directement à Google Sheets, Airtable, ou stockées localement.
Si vous avez des commentaires à nous faire sur les composants du Data Viewer, veuillez nous en faire part dans la communauté Thunkable.
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 liste 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.
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 tableau. 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 mode 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 modal suivant, choisissez entre Create your own table, Airtable ou Google Sheets.
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 indique Click here to edit the data. Cela vous permet de modifier les données de remplacement qui ont été générées automatiquement.
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 Create.
Si vous êtes nouveau à Airtable, vous pouvez en lire plus dans notre documentation sur Airtable.
Google Sheets
Dans Google Sheets, l'ensemble du document 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 retourner sur le projet Thunkable.
Enfin, donnez un nom à votre source de données et vous êtes prêt à partir.
Disposition des éléments de la liste
Une fois que vous avez spécifié une source de données, vous pouvez choisir la présentation de votre liste d'éléments. Vous avez le choix entre 7 options. En fonction des données brutes dont vous disposez, vous pouvez choisir la présentation qui correspond le mieux à vos besoins particuliers.
Title
Title Subtitle
Image Title
Image Title Subtitle
Image Title Subtitle Text
Image Title Subtitle Secondary Image Description
Image Title Subtitle Description
Custom Layout
Vous pouvez également concevoir une mise en page personnalisée du visualiseur de données et l'enregistrer avec le type de mise en page "Liste" pour l'utiliser dans votre liste de visualiseurs de données.
Liaisons de données
Vous pouvez maintenant spécifier manuellement quelles colonnes de votre source de données correspondent aux caractères de remplissage dans la disposition choisie. Chaque mise en page aura son propre ensemble spécifique de liaisons de données. Deux exemples sont donnés ci-dessous à titre de référence.
Si vous utilisez la mise en page Title, vous n'aurez qu'une seule liaison de données, la propriété Title.
Cela augmente jusqu'à cinq propriétés, dans le cas de la disposition de la description de l'image secondaire du sous-titre de l'image.
Balayage à gauche
Vous pouvez définir un bouton cliquable et personnalisable qui apparaît lorsque l'élément de la liste est glissé vers la gauche. Si Left Swipe est réglé sur "True", vous verrez des options supplémentaires pour personnaliser le texte du bouton, la couleur du texte et la couleur de fond du bouton.
Lorsque vous testez cette fonction sur votre téléphone, vous verrez que chaque élément de la liste peut être glissé vers la gauche pour faire apparaître un bouton cliquable. Le gestionnaire d'événements Left Swipe Click Event contrôle ce qui se passe lorsque l'on clique sur ce bloc.
Balayage à droite
Vous pouvez également définir un bouton cliquable et personnalisable qui apparaît lorsque l'élément de la liste est glissé vers la droite.
Lorsque vous testez cette fonction sur votre téléphone, vous verrez que chaque élément de la liste peut être glissé vers la droite pour faire apparaître un bouton cliquable. Le gestionnaire d'événements "Right Swipe Click" contrôle ce qui se passe quand on clique sur ce bloc.
Blocs
Click
L'événement "Item Click" est déclenché lorsqu'un élément de la Data Viewer List est cliqué. Il renvoie un row id qui correspond à l'identifiant unique Thunkable de l'élément cliqué. Le row idest utile lorsqu'il est utilisé avec les blocs Data Source.
Swipe
Les événements de clic gauche et droit sont déclenchés lorsque l'on clique sur ces boutons. Les deux renvoient un row id pour identifier rapidement la ligne sur laquelle on a cliqué lors de l'utilisation des blocs Data Source.
Height & Width
Les blocs suivants vous permettent de travailler avec les propriétés de hauteur et de largeur du Data Viewer.
Visible
L'ensemble du Data Viewer peut être masqué ou affiché en réglant la propriété visible sur faux ou vrai, respectivement.
Refresh
Rafraîchi la Data Viewer List pour la synchroniser avec la Data Source.
Data Source Blocks (Bloc Source de Données)
Lorsque vous connectez une source de données à votre projet, vous avez également accès à un deuxième module. 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 Data Sources (Sources de données) dans votre projet.
Last updated
