Displaying Salesforce CMS Files in a Data Table

Overview

This tutorial guides you through using the Avonni Data Table component to display a list of files from a Salesforce Content Management System (CMS) Collection. You will learn how to configure the table and add a "Download" button for each file, providing a seamless experience for users, especially within an Experience Cloud site.

What You'll Learn:

  • How to connect the Avonni Data Table to a Salesforce CMS Collection.

  • How to configure columns to display content details like Title and Created Date.

  • How to add a custom action column with a "Download" button.

  • How to use the Download CMS interaction to make files downloadable for users.

Prerequisites:

  • You must have an active Salesforce CMS Collection with one or more published content items (e.g., PDFs, images).

  • You will need the 18-character ID of this CMS Collection.


Guided Steps

1

Add the Data Table Component

First, let's set up the Data Table that will display our list of CMS files.

  1. From the Component Library (left panel), find the Avonni Data Table component and drag it onto the canvas.

2

Configure the Data Source

Next, we need to connect the Data Table to your specific Salesforce CMS Collection.

  1. With the Data Table selected, find the Data Source property in the Properties Panel.

  2. Select CMS Collection from the list of data source types.

  3. In the Collection ID field that appears, enter the 18-character ID of your Salesforce CMS Collection (start with 20Y)

The Data Table is now connected and aware of the content items within your collection.

3

Add Columns to Display Content Information

Now, let's define which details about the files will be visible in the table.

  1. In the Data Table's properties, navigate to the Columns section.

  2. Click "Add Column" to create a new column.

  3. Source Field: Select a field from the CMS content data (e.g., Title).

  4. Column Label: Give it a user-friendly label (e.g., "Document Title").

  5. Repeat this process to add other relevant columns, such as CreatedDate or LastModifiedDate.

4

Add and Configure the Download Action

This is the most essential step for making the files accessible to users. Since we can't link directly to a file's name, we will create a dedicated action button.

  1. Add an Action Column: In the Columns section of the Data Table properties, click "Add Column" one more time. In the column's settings, set its Type to Button.

  2. Configure the Button Item:

    • Within the Button column's properties, add a new button item.

    • Give it a Label like "Download" or "View File".

    • Set an Icon Name (e.g., utility:download) for a better visual cue.

  3. Create the "Download CMS" Interaction:

    • Select the "Download" action item you just configured.

    • Go to its Interactions section and add an On Click interaction.

    • For the Type, select Download CMS.

    • This specific interaction is designed to securely generate and initiate a download for the CMS file associated with that particular row in the table. No other properties are needed for this interaction.

5

Save and Deploy

Now that your Avonni Data Table is fully configured directly on the Experience Cloud page, the final step is to make it live for your site visitors. In Experience Builder, your configuration changes are typically saved as you work; however, you must publish the site for them to become visible to your audience.

Why Use a Dedicated "Download CMS" Interaction?

When content is managed via Salesforce CMS and displayed in an Experience Cloud site, the files don't have a standard "record detail page" that a simple link can navigate to. The file's name in the table is just text. The Download CMS interaction acts as a secure bridge, correctly identifying the file version associated with the row and initiating a download for the user. This ensures a reliable and seamless user experience.

Result

You now have a dynamic, user-friendly table listing your Salesforce CMS content. When a user clicks the "Download" button on any row, the corresponding file will be downloaded directly to their device.

Last updated

Was this helpful?