> ## Documentation Index
> Fetch the complete documentation index at: https://coconut-grid.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Lightning Web コンポーネント

Lightning ページに Coconut Grid を直接埋め込みます。

## コンポーネント

以下の Lightning Web コンポーネントが利用可能です。

| コンポーネント | 説明 |
| - | - |
| Coconut Grid Item | Lightning ページ内に指定したアイテムのレイアウトとタブを表示 |
| Coconut Grid Item View | Coconut Grid Item のレコードページで現在のアイテムを表示 |

## Coconut Grid Item

Coconut Grid Item コンポーネントを使用して、レコードページ、ホームページ、アプリケーションページなどの Lightning ページにアイテムのレイアウトとタブを表示します。

**1. コンポーネントを追加**

Lightning アプリケーションビルダーを開き、Coconut Grid Item コンポーネントを追加します。

* コンポーネントをページにドラッグ
* 任意の位置に配置

**2. プロパティを設定**

コンポーネントのプロパティを設定します。

| 項目 | 説明 |
| - | - |
| **Item ID** (`itemId`) | 必須。表示するアイテムの Salesforce レコード ID を指定 |
| **Tab ID** (`tabId`) | 省略可能。アイテム内で最初に選択するタブの Salesforce レコード ID を指定。省略すると最初のタブが選択されます |
| **Height** (`height`) | 省略可能。既定値は `600px`。`600` などの数値をピクセルとして指定するか、`600px` や `100%` などの CSS 値を指定 |

アイテムやタブのキーではなく、レコード ID を使用してください。**Tab ID** は、他のタブやレイアウトエリアを非表示にせず、最初に選択するタブを指定します。パーセント指定には、親領域の高さが定義されている必要があります。

**3. 保存と有効化**

ページを保存して有効化します。

Lightning ページ内にアイテムが表示されます。

## Coconut Grid Item View

Coconut Grid Item のレコードページで **Coconut Grid Item View** を使用すると、現在のアイテムを自動的に表示できます。このコンポーネントは、Coconut Grid Item オブジェクトのデスクトップ用レコードページで使用できます。

| 項目 | 説明 |
| - | - |
| **Tab ID** (`tabId`) | 省略可能。現在のアイテム内で最初に選択するタブの Salesforce レコード ID を指定。省略すると最初のタブが選択されます |
| **Height** (`height`) | 省略可能。既定値は親領域の `100%`。親領域の高さが定義されていない場合は、`600px` などの明示的な高さを指定してください |

現在のアイテムの `recordId` は Salesforce が渡すため、このコンポーネントには設定する **Item ID** プロパティはありません。

カスタム Visualforce ページに埋め込む場合は[Visualforce コンポーネント](https://coconut-grid.mintlify.site/ja/configuration/visualforce-components.md)、URL からアイテムを開く場合は[Visualforce ページ](https://coconut-grid.mintlify.site/ja/configuration/visualforce-pages.md)を参照してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.