Displaying Salesforce CMS Files in a Data Table

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.

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.

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.

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.

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.