> ## 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.

# Visualforce コンポーネント

Visualforce コンポーネントを使用して、Visualforce ページに Coconut Grid を埋め込みます。

## コンポーネント

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

| コンポーネント名 | コンポーネント API 名 | 属性 |
| - | - | - |
| Coconut Grid | `CG_App` | |
| Coconut Grid Item | `CG_Item` | `itemId`、`tabId`、`height` |

## Coconut Grid

Coconut Grid コンポーネントを使用して、Visualforce ページに Coconut Grid のフル画面を埋め込みます。

```xml theme={null}
<CoconutGrid:CG_App />
```

## Coconut Grid Item

Coconut Grid Item コンポーネントを使用して、Visualforce ページに特定のアイテムを埋め込みます。

* `itemId` – 必須。表示するアイテムの Salesforce レコード ID を指定
* `tabId` – 省略可能。アイテム内で最初に選択するタブの Salesforce レコード ID を指定。省略すると最初のタブが選択されます
* `height` – 省略可能。コンポーネントの高さを `600`、`600px`、`100%` などで指定。数値のみの場合はピクセルとして扱われます。パーセント指定には、親要素の高さが定義されている必要があります

アイテムやタブのキーではなく、レコード ID を使用してください。コンポーネントはアイテムのレイアウトを表示し、`tabId` は他のタブやエリアを非表示にせず、最初に選択するタブを指定します。これらは URL のクエリパラメーターではなく、コンポーネントの属性です。

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Item__c.Id}" height="100%" />
```

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Tab__c.CoconutGrid__CG_Item__c}" tabId="{!CoconutGrid__CG_Tab__c.Id}" height="600px" />
```

コンポーネントの属性ではなく URL にアイテムやタブの ID を指定する場合は、[Visualforce ページ](https://coconut-grid.mintlify.site/ja/configuration/visualforce-pages.md)を参照してください。Lightning アプリケーションビルダーでは[Lightning Web コンポーネント](https://coconut-grid.mintlify.site/ja/configuration/lightning-web-component.md)を使用します。


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