# Custom Data Viewer Layout (Disposition personnalisée du visualiseur de données)

## **Vue d'ensemble**

Bien que la [liste ](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/untitled)et la [grille ](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/untitled-1)de visualisation des données aient des options de présentation différentes, vous pouvez concevoir une présentation personnalisée pour vos données. Cela peut être réalisé avec les composants [Row ](https://bastien-dosreis.gitbook.io/thunkable/components/layout/row-rangee)et [Column](https://bastien-dosreis.gitbook.io/thunkable/components/layout/column-colonne).

* [Tutoriel Vidéo](#tutoriel-video)
* [Comment utiliser une mise en page personnalisée dans votre application](#comment-utiliser-une-mise-en-page-personnalisee-dans-votre-application)
* [Gestion de vos mises en pages](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/untitled-2)
* [Sources de données](#sources-de-donnees)

## **Tutoriel vidéo**

{% embed url="<https://youtu.be/UIZtLgELGyk>" %}

## **Comment utiliser une mise en page personnalisée dans votre application**

### **Concevez votre mise en page personnalisée**

Utilisez une [ligne](https://bastien-dosreis.gitbook.io/thunkable/components/layout/row-rangee) ou une [colonne ](https://bastien-dosreis.gitbook.io/thunkable/components/layout/column-colonne)pour créer la mise en page personnalisée que vous souhaitez. Dans la suite de ce document, nous appellerons cela la "rangée/colonne parentale".

Cette disposition est une rangée qui contient deux colonnes. La première colonne contient 3 [étiquettes ](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-5): **TitleLabel**, **DescriptionLabel**, et **PriceLabel**. La deuxième colonne contient une [image](https://bastien-dosreis.gitbook.io/thunkable/components/untitled-2/image-en-cours), une **ProductImage** (**image produit)** et un classement, appelé **ProductRating** (**classement produit)**. Ces composants seront référencés dans les prochaines captures d'écran de ce document.

{% hint style="info" %}
Si vous souhaitez définir la hauteur ou la largeur de la ligne/colonne parentale pour remplir le récipient, nous vous recommandons de la régler sur **Taille relative - 100%** pour de meilleurs résultats.
{% endhint %}

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB6y_plQlzulOMMR%2F1.png?generation=1610722625091441\&alt=media)

### **Enregistrez votre mise en page personnalisée**

Sélectionnez votre rangée/colonne parentale et cliquez sur le bouton `Save as Data Viewer Layout` (Enregistrer sous la forme d'un visualiseur de données)

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB6zWfKJBtEwBr9F%2F2.png?generation=1610722625055026\&alt=media)

#### **De base**

Lorsque vous cliquez sur "**Save as Data Viewer Layout"**, vous verrez le dialogue suivant :

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB7-mInX7DG6U9e4%2F3.png?generation=1610722625054598\&alt=media)

Pour enregistrer un schéma de base du visualiseur de données :

* Entrez un **Layout Name** (**nom de mise en page)**
* Sélectionnez si votre **Layout Type** (**type de mise en page)** est **List** (**Liste)** ou **Grid** (**Grille)**

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB70Nz2DOypsDHG1%2F4.png?generation=1610722625035103\&alt=media)

* Laisser le paramètre "**Advanced Binding"** sur **faux**
* Cliquez sur **OK**

#### **Avancé**

Pour enregistrer une mise en page avancée du visualiseur de données :

* Entrez un **Layout Name** (**nom de mise en page)**
* Sélectionnez si votre **Layout Type** (**type de mise en page)** est **List** (**Liste)** ou **Grid** (**Grille)**
* Mettre le paramètre **Advanced Binding** (**reliure avancée)** sur **True**

Vous pouvez maintenant sélectionner les propriétés des composants de votre rangée/colonne parentale que vous souhaitez lier aux valeurs de votre Data Source (source de données).

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB715s-nJk5vtVBg%2F5.png?generation=1610722625058204\&alt=media)

Une fois que vous avez sélectionné toutes les propriétés que vous voulez lier aux valeurs de votre source de données, cliquez sur **OK** pour enregistrer votre présentation personnalisée du visualiseur de données.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB72s-VAO3yigtDE%2F6.png?generation=1610722625079865\&alt=media)

### **Utilisez votre mise en page personnalisée**

Une fois que vous avez enregistré votre mise en page personnalisée, vous pouvez la sélectionner comme mise en page pour votre Data Viewer. Si votre mise en page a été enregistrée avec la liste des types de mise en page, elle peut être utilisée avec la [Data Viewer List](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/untitled). S'il a été enregistré avec la grille des types de mise en page, il peut être utilisé avec la [Data Viewer Grid](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/untitled-1).

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB733lo74MZfYl46%2F7.png?generation=1610722625053536\&alt=media)

### **Reliez vos données à votre mise en page personnalisée**

Vous pouvez lier les propriétés de vos données à une [source de données](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/broken-reference).

#### **De base**

Avec le Basic Data Binding, Thunkable sélectionnera automatiquement les propriétés de base de vos composants pour les lier aux valeurs de votre source de données.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB745bfNAEF-sAxl%2F8.png?generation=1610722625070392\&alt=media)

#### **Avancé**

Avec Advanced Data Binding, Thunkable vous permettra de lier les propriétés que vous avez spécifiées à votre source de données :

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB757WqciGAIhym0%2F9.png?generation=1610722625109863\&alt=media)

## **Gestion de vos mises en page personnalisées**

Vous pouvez gérer vos mises en page de données personnalisées en vous rendant sur la page d'accueil de Thunkable à l'adresse [x.thunkable.com/projects ](https://x.thunkable.com/projects)et en cliquant sur l'onglet "**Mes modules"** en haut de la page. À partir de là, vous pouvez modifier et supprimer vos mises en page de données personnalisées.

![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5Y6B7ivBQCNF8tkdl%2F-MR5YB76wlGHjeSSx2HD%2F10.png?generation=1610722625142716\&alt=media)

## **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.

{% content-ref url="broken-reference" %}
[Broken link](https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/untitled-4/broken-reference)
{% endcontent-ref %}