Créer des applications puissantes, sans code, orientées données, connectées directement à Google Sheets, Airtable, ou stockées localement.
Last updated
Was this helpful?
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 inclus ou vous pouvez travailler directement avec vos données brutes en utilisant les .
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 ou pour stocker des données dans le nuage. Vous pouvez également créer . 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
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.
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.
Dans Airtable, une base est considérée comme la source de données. L'ajout d'une Airtable est très simple.
Choisissez la base que vous souhaitez utiliser comme source de données et cliquez Create.
Dans Google Sheets, l'ensemble du document est considéré comme la source de données.
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.
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.
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.
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.
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.
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.
Les blocs suivants vous permettent de travailler avec les propriétés de hauteur et de largeur du Data Viewer.
L'ensemble du Data Viewer peut être masqué ou affiché en réglant la propriété visible sur faux ou vrai, respectivement.
Rafraîchi la Data Viewer List pour la synchroniser avec la Data Source.
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.
Dans le modal suivant, choisissez entre , ou .
Pour commencer, copiez votre clé API depuis la page de votre . 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.
Si vous êtes nouveau à Airtable, vous pouvez en lire plus dans notre documentation sur .
Une fois que vous avez spécifié une , 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.
Vous pouvez également concevoir une et l'enregistrer avec le type de mise en page "Liste" pour l'utiliser dans votre liste de visualiseurs de données.
Si vous utilisez la mise en page , 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 .
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 " contrôle ce qui se passe quand on clique sur ce bloc.
