Displaying Salesforce CMS Files in a Data Table
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial guides you through using the 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.
Next, we need to connect the Data Table to your specific Salesforce CMS Collection.
With the Data Table selected, find the Data Source property in the Properties Panel.
Select CMS Collection from the list of data source types.
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.
Now, let's define which details about the files will be visible in the table.
In the Data Table's properties, navigate to the Columns section.
Click "Add Column" to create a new column.
Source Field: Select a field from the CMS content data (e.g., Title).
Column Label: Give it a user-friendly label (e.g., "Document Title").
Repeat this process to add other relevant columns, such as CreatedDate or LastModifiedDate.
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.
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.
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.
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.
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.
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.
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.
