> 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).
# Affichage des fichiers Salesforce CMS dans une Data Table
## 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 provenant 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, notamment sur un site Experience Cloud.
**Ce que vous allez apprendre :**
* Comment connecter le tableau de données Avonni à une collection Salesforce CMS.
* Comment configurer les colonnes pour afficher des détails de contenu comme 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’ **interaction Télécharger CMS** pour permettre aux utilisateurs de télécharger les fichiers.
**Prérequis :**
* Vous devez disposer d’une **collection Salesforce CMS** active contenant un ou plusieurs éléments de contenu publiés (par exemple, des PDF, des images).
* Vous aurez besoin de l’ **ID de 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.
{% endstep %}
{% step %}
### Configurer la source de données
Ensuite, nous devons connecter le tableau de données à votre collection Salesforce CMS 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 de 18 caractères** ID de votre collection Salesforce CMS ou la clé de contenu.
Le tableau de données est maintenant connecté et prend en compte les éléments de contenu de votre collection.
{% endstep %}
{% step %}
### Ajouter des colonnes pour afficher les informations du contenu
Définissons maintenant 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`.
{% 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 du bouton :**
* Dans les propriétés de la colonne Bouton, ajoutez un nouvel élément de bouton.
* Attribuez-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 la **Type**, sélectionnez **interaction Télécharger CMS**.
* Cette interaction spécifique est conçue pour générer en toute sécurité et lancer le téléchargement du fichier CMS associé à cette ligne particulière du tableau. Aucune autre propriété n’est nécessaire pour cette interaction.
{% 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 disponible pour les 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 ne disposent pas d’une « 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’ **interaction Télécharger CMS** interaction agit comme un pont sécurisé, identifie correctement la version du fichier associée à la ligne et lance le téléchargement pour l’utilisateur. Cela garantit une expérience utilisateur fiable et fluide.
## **Résultat**
Vous disposez maintenant 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 est 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=&goal=
```
`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.