> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md).

# Afficher les fichiers Salesforce CMS dans un tableau de données

## Aperçu

Ce tutoriel vous guide dans l'utilisation du [Avonni **Tableau de données**](/experience-cloud/experience-cloud-fr/tutoriels/components/data-table.md) composant pour afficher une liste de fichiers à partir d'une **collection du système de gestion de contenu (CMS) Salesforce**. Vous apprendrez à configurer le tableau et à ajouter un bouton « Télécharger » pour chaque fichier, offrant ainsi une expérience fluide aux utilisateurs, en particulier dans un site Experience Cloud.

**Ce que vous allez apprendre :**

* Comment connecter le tableau de données Avonni à une collection CMS Salesforce.
* Comment configurer les colonnes pour afficher des détails de contenu tels que le titre et la date de création.
* Comment ajouter une colonne d'action personnalisée avec un bouton « Télécharger ».
* Comment utiliser l' **Télécharger CMS** interaction pour permettre aux utilisateurs de télécharger les fichiers.

**Prérequis :**

* Vous devez disposer d'une **collection CMS Salesforce** active contenant un ou plusieurs éléments de contenu publiés (par ex., des PDF, des images).
* Vous aurez besoin de l' **ID à 18 caractères** de cette collection CMS.

***

## Étapes guidées

{% stepper %}
{% step %}

### Ajouter le composant Data Table

Tout d'abord, configurons le tableau de données qui affichera notre liste de fichiers CMS.

1. Depuis la **Bibliothèque de composants** (panneau de gauche), recherchez le **Avonni Data Table** composant et faites-le glisser sur le canevas.

<figure><img src="/files/06c2a1f71414016cd6579ed16cfbf3e3366240dc" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configurer la source de données

Ensuite, nous devons connecter le tableau de données à votre collection CMS Salesforce spécifique.

1. Avec le tableau de données sélectionné, recherchez la **Source de données** propriété dans le panneau des propriétés.
2. Sélectionnez **Collection CMS** dans la liste des types de source de données.
3. Dans le **ID de collection** champ qui apparaît, saisissez l' **ID à 18 caractères** de votre collection CMS Salesforce ou clé de contenu.

Le tableau de données est maintenant connecté et connaît les éléments de contenu de votre collection.

<figure><img src="/files/21d8235b8dd3b76aefcf26f0e7691cf3ade3ca93" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Ajouter des colonnes pour afficher les informations de contenu

Maintenant, définissons quels détails sur les fichiers seront visibles dans le tableau.

1. Dans les propriétés du tableau de données, accédez à la **Colonnes** section.
2. Clic **« Ajouter une colonne »** pour créer une nouvelle colonne.
3. **Champ source :** Sélectionnez un champ à partir des données de contenu CMS (par ex., `Titre`).
4. **Libellé de la colonne :** Attribuez-lui un libellé convivial (par ex., « Titre du document »).
5. Répétez ce processus pour ajouter d'autres colonnes pertinentes, telles que `CreatedDate` ou `LastModifiedDate`.

<figure><img src="/files/669fabaaaaaaec895124be8195bb4d3a8ba26077" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Ajouter et configurer l'action de téléchargement

C'est l'étape la plus essentielle pour rendre les fichiers accessibles aux utilisateurs. Comme nous ne pouvons pas créer de lien direct vers le nom d'un fichier, nous allons créer un bouton d'action dédié.

1. **Ajouter une colonne d'action :** Dans le **Colonnes** section des propriétés du tableau de données, cliquez sur **« Ajouter une colonne »** une fois de plus. Dans les paramètres de la colonne, définissez son **Type** sur **Bouton**.
2. **Configurer l'élément de bouton :**
   * Dans les propriétés de la colonne de bouton, ajoutez un nouvel élément de bouton.
   * Donnez-lui un **Libellé** tel que « Télécharger » ou « Voir le fichier ».
   * Définissez une **Nom de l'icône** (par ex., `utility:download`) pour un meilleur repère visuel.
3. **Créer l'interaction « Télécharger CMS » :**
   * Sélectionnez l'élément d'action « Télécharger » que vous venez de configurer.
   * Accédez à sa **Interactions** section et ajoutez une **Au clic** interaction.
   * Pour l' **Type**, sélectionnez **Télécharger CMS**.
   * Cette interaction spécifique est conçue pour générer de manière sécurisée et lancer un téléchargement du fichier CMS associé à cette ligne particulière du tableau. Aucune autre propriété n'est nécessaire pour cette interaction.

<figure><img src="/files/64dc1444452ea25b6480bf9b800e6eea0dcf8299" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enregistrer et déployer

Maintenant que votre tableau de données Avonni est entièrement configuré directement sur la page Experience Cloud, la dernière étape consiste à le rendre accessible aux visiteurs de votre site. Dans Experience Builder, vos modifications de configuration sont généralement enregistrées au fur et à mesure que vous travaillez ; cependant, vous devez **publier** le site pour qu'elles deviennent visibles par votre audience.
{% endstep %}
{% endstepper %}

## Pourquoi utiliser une interaction dédiée « Télécharger CMS » ?

Lorsque le contenu est géré via Salesforce CMS et affiché dans un site Experience Cloud, les fichiers n'ont pas de « page de détails d'enregistrement » standard vers laquelle un simple lien peut naviguer. Le nom du fichier dans le tableau n'est que du texte. L' **Télécharger CMS** interaction agit comme un pont sécurisé, identifiant correctement la version du fichier associée à la ligne et lançant un téléchargement pour l'utilisateur. Cela garantit une expérience utilisateur fiable et fluide.

## **Résultat**

Vous disposez désormais d'un tableau dynamique et convivial répertoriant votre contenu Salesforce CMS. Lorsqu'un utilisateur clique sur le bouton « Télécharger » d'une ligne, le fichier correspondant sera téléchargé directement sur son appareil.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.