> 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-es/tutoriales/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md).

# Mostrar archivos de Salesforce CMS en una Data Table

## Resumen

Este tutorial te guía a través del uso de la [Avonni **Tabla de datos**](/experience-cloud/experience-cloud-es/tutoriales/components/data-table.md) componente para mostrar una lista de archivos de una **Colección del Sistema de Gestión de Contenidos (CMS) de Salesforce**. Aprenderás a configurar la tabla y a agregar un botón "Descargar" para cada archivo, proporcionando una experiencia fluida para los usuarios, especialmente dentro de un sitio de Experience Cloud.

**Lo que aprenderás:**

* Cómo conectar la tabla de datos de Avonni a una colección de Salesforce CMS.
* Cómo configurar columnas para mostrar detalles del contenido como Título y Fecha de creación.
* Cómo agregar una columna de acción personalizada con un botón "Descargar".
* Cómo usar la **Descargar CMS** interacción para hacer que los archivos puedan descargarse para los usuarios.

**Requisitos previos:**

* Debes tener una **Colección de Salesforce CMS** activa con uno o más elementos de contenido publicados (por ejemplo, PDFs, imágenes).
* Necesitarás el **ID de 18 caracteres** de esta colección de CMS.

***

## Pasos guiados

{% stepper %}
{% step %}

### Añada el componente Data Table

Primero, configuraremos la tabla de datos que mostrará nuestra lista de archivos de CMS.

1. Desde la **Biblioteca de componentes** (panel izquierdo), encuentra el **Avonni Data Table** componente y arrástralo al lienzo.

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

{% step %}

### Configurar la fuente de datos

A continuación, necesitamos conectar la tabla de datos a tu colección específica de Salesforce CMS.

1. Con la tabla de datos seleccionada, busca la **Fuente de datos** propiedad en el panel de propiedades.
2. Selecciona **Colección de CMS** de la lista de tipos de origen de datos.
3. En el **ID de colección** campo que aparece, introduce el **ID de 18 caracteres** de tu colección de Salesforce CMS o clave de contenido.

La tabla de datos ahora está conectada y conoce los elementos de contenido dentro de tu colección.

<figure><img src="/files/28573fa162a08d90b595c0485e69e269117c9779" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Agregar columnas para mostrar información del contenido

Ahora, definamos qué detalles sobre los archivos serán visibles en la tabla.

1. En las propiedades de la tabla de datos, ve a la **Columnas** sección.
2. Clic **"Agregar columna"** para crear una nueva columna.
3. **Campo de origen:** Selecciona un campo de los datos de contenido de CMS (por ejemplo, `Título`).
4. **Etiqueta de la columna:** Asígnale una etiqueta fácil de entender para el usuario (por ejemplo, "Título del documento").
5. Repite este proceso para agregar otras columnas relevantes, como `CreatedDate` o `LastModifiedDate`.

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

{% step %}

### Agregar y configurar la acción de descarga

Este es el paso más esencial para hacer que los archivos sean accesibles para los usuarios. Como no podemos enlazar directamente al nombre de un archivo, crearemos un botón de acción dedicado.

1. **Agregar una columna de acción:** En el **Columnas** sección de las propiedades de la tabla de datos, haz clic **"Agregar columna"** una vez más. En la configuración de la columna, establece su **Tipo** en **Botón**.
2. **Configurar el elemento de botón:**
   * Dentro de las propiedades de la columna Botón, agrega un nuevo elemento de botón.
   * Dale un **Etiqueta** como "Descargar" o "Ver archivo".
   * Establece un **Nombre del icono** (por ejemplo, `utility:download`) para una mejor indicación visual.
3. **Crear la interacción "Descargar CMS":**
   * Selecciona el elemento de acción "Descargar" que acabas de configurar.
   * Ve a su **Interacciones** sección y agrega una **Al hacer clic** interacción.
   * Para la **Tipo**, seleccione **Descargar CMS**.
   * Esta interacción específica está diseñada para generar de forma segura e iniciar una descarga del archivo de CMS asociado con esa fila particular de la tabla. No se necesitan otras propiedades para esta interacción.

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

{% step %}

### Guardar y desplegar

Ahora que tu tabla de datos de Avonni está completamente configurada directamente en la página de Experience Cloud, el paso final es ponerla en vivo para los visitantes de tu sitio. En Experience Builder, tus cambios de configuración normalmente se guardan a medida que trabajas; sin embargo, debes **publicar** el sitio para que sean visibles para tu audiencia.
{% endstep %}
{% endstepper %}

## ¿Por qué usar una interacción dedicada "Descargar CMS"?

Cuando el contenido se gestiona mediante Salesforce CMS y se muestra en un sitio de Experience Cloud, los archivos no tienen una "página de detalles del registro" estándar a la que pueda navegar un enlace simple. El nombre del archivo en la tabla es solo texto. La **Descargar CMS** interacción actúa como un puente seguro, identificando correctamente la versión del archivo asociada con la fila e iniciando una descarga para el usuario. Esto garantiza una experiencia de usuario fiable y fluida.

## **Resultado**

Ahora tienes una tabla dinámica y fácil de usar que lista el contenido de Salesforce CMS. Cuando un usuario hace clic en el botón "Descargar" de cualquier fila, el archivo correspondiente se descargará directamente en su dispositivo.


---

# 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-es/tutoriales/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.
