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

# Data Table で Salesforce CMS ファイルを表示する

## 概要

このチュートリアルでは、〜の使い方を順を追って説明します [Avonni **データテーブル**](/experience-cloud/experience-cloud-ja/chtoriaru/components/data-table.md) というコンポーネントを使用して、〜からファイルの一覧を表示します **Salesforceコンテンツ管理システム（CMS）コレクション**。テーブルの設定方法と、各ファイルに「ダウンロード」ボタンを追加する方法を学び、特にExperience Cloudサイト内でユーザーにシームレスな体験を提供します。

**学習内容:**

* Avonni Data Table を Salesforce CMS コレクションに接続する方法。
* Title や Created Date などのコンテンツ詳細を表示する列を構成する方法。
* 「ダウンロード」ボタンを備えたカスタムアクション列を追加する方法。
* 〜の使用方法 **Download CMS** というインタラクションを使用して、ユーザーがファイルをダウンロードできるようにします。

**前提条件:**

* 有効な **Salesforce CMS コレクション** があり、公開済みのコンテンツアイテムが 1 つ以上（例: PDF、画像）含まれている必要があります。
* 〜が必要です **18文字のID** この CMS コレクションの。

***

## 手順

{% stepper %}
{% step %}

### Data Table コンポーネントを追加する

まず、CMSファイル一覧を表示するData Tableを設定しましょう。

1. 〜から **コンポーネントライブラリ** （左側パネル）で、〜を見つけます **Avonni Data Table** コンポーネントをキャンバスにドラッグします。

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

{% step %}

### データソースを設定する

次に、Data Table を特定の Salesforce CMS コレクションに接続する必要があります。

1. Data Table を選択した状態で、〜を見つけます **データソース** プロパティパネルのプロパティ
2. 選択 **CMS コレクション** をデータソースタイプの一覧から。
3. 次で **コレクションID** フィールドが表示されたら、〜を入力します **18文字のID** Salesforce CMS コレクションまたはコンテンツキーの。

これで Data Table は接続され、コレクション内のコンテンツアイテムを認識できるようになりました。

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

{% step %}

### コンテンツ情報を表示する列を追加する

次に、ファイルのどの詳細をテーブルに表示するかを定義しましょう。

1. Data Table のプロパティで、〜に移動します **カラム** セクション。
2. クリック **「列を追加」** をクリックして新しい列を作成します。
3. **ソースフィールド:** CMSコンテンツデータからフィールドを選択します（例:  `タイトル`).
4. **列ラベル:** ユーザーにわかりやすいラベルを付けます（例: 「ドキュメントタイトル」）。
5. この手順を繰り返して、次のような他の関連列も追加します `CreatedDate` または `LastModifiedDate`.

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

{% step %}

### ダウンロードアクションを追加して設定する

これは、ユーザーがファイルにアクセスできるようにするための最も重要な手順です。ファイル名に直接リンクすることはできないため、専用のアクションボタンを作成します。

1. **アクション列を追加する:** 次で **カラム** Data Table のプロパティのセクションで、 **「列を追加」** をもう一度クリックします。列の設定で、 **タイプ** に **ボタン**.
2. **ボタン項目を設定する:**
   * ボタン列のプロパティ内で、新しいボタン項目を追加します。
   * にします **ラベル** 「ダウンロード」や「ファイルを表示」のように。
   * 〜を設定します **アイコン名** （例: `utility:download`）を設定して、視覚的な手がかりをよりわかりやすくします。
3. **「Download CMS」インタラクションを作成する:**
   * 先ほど設定した「Download」アクション項目を選択します。
   * その **Interactions** セクションに移動し、 **クリック時** インタラクションを追加します。
   * 〜について **タイプ**、選択し **Download CMS**.
   * この特定のインタラクションは、テーブル内のその特定の行に関連付けられた CMS ファイルを安全に生成し、ダウンロードを開始するように設計されています。このインタラクションに他のプロパティは必要ありません。

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

{% step %}

### 保存してデプロイする

Experience Cloud ページ上で Avonni Data Table の設定が完了したら、最後の手順はサイト訪問者に公開することです。Experience Builder では、設定変更は通常作業中に保存されますが、 **公開** して初めて、サイトの閲覧者に表示されます。
{% endstep %}
{% endstepper %}

## 専用の「Download CMS」インタラクションを使用する理由

コンテンツが Salesforce CMS で管理され、Experience Cloud サイトに表示される場合、ファイルには単純なリンクで移動できる標準の「レコード詳細ページ」がありません。テーブル内のファイル名は単なるテキストです。 **Download CMS** インタラクションは安全な橋渡しとして機能し、行に関連付けられたファイルバージョンを正しく識別して、ユーザーのダウンロードを開始します。これにより、信頼性が高くシームレスなユーザー体験が保証されます。

## **結果**

これで、Salesforce CMS コンテンツを一覧表示する動的で使いやすいテーブルができました。ユーザーがどの行の「ダウンロード」ボタンをクリックしても、対応するファイルがデバイスに直接ダウンロードされます。


---

# 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-ja/chtoriaru/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.