> For the complete documentation index, see [llms.txt](https://docs.mashmatrix.com/mashmatrix-sheet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mashmatrix.com/mashmatrix-sheet/ja/customization/using_sheet_component_in_custom_lwc.md).

# カスタムLightning WebコンポーネントでのSheetの利用

Sheetコンポーネントは、Lightningアプリケーションビルダーからページに配置するだけでなく、独自に開発したLightning Webコンポーネントのテンプレート内に配置して利用することもできます。これにより、シートの表示と独自のコントロールを組み合わせた画面を構成できます。

Sheetコンポーネント自体およびLightningページへの配置方法については「[Sheetコンポーネント](/mashmatrix-sheet/ja/customization/sheet_component.md)」を参照してください。

## テンプレートへの配置 <a href="#embed-in-template" id="embed-in-template"></a>

Lightning Webコンポーネントのテンプレート内には以下のように記述します。属性として指定できる値は、Lightningアプリケーションビルダーで設定するプロパティと同じものです。

```html
<msmxsheet-sheet-component
  title="商談一覧"
  book-id={bookId}
  sheet-id={sheetId}
  record-id={recordId}
  parameters={parameters}
  publish-events={publishEvents}
  component-id={componentId}
  height="500px"
  onselectrecord={handleSelectRecord}
></msmxsheet-sheet-component>
```

それぞれの属性の意味は、Lightningアプリケーションビルダー上の同名のプロパティと同じです。詳しくは「[Sheetコンポーネント](/mashmatrix-sheet/ja/customization/sheet_component.md)」の「Sheetコンポーネントのプロパティ」を参照してください。

## 表示するブック・シートの動的な変更 <a href="#change-book-sheet-dynamically" id="change-book-sheet-dynamically"></a>

配置したSheetコンポーネントの「Book ID」および「Sheet ID」は、実行中に変更することができます。値を変更すると、コンポーネントが作り直されることなく、表示対象のブックおよびシートが切り替わります。これにより、独自に用意したコントロールでの選択に連動して、表示するシートを切り替えるといった構成が可能になります。

「Book ID」に値が設定されていない場合、および実行中に「Book ID」の値が空になった場合、Sheetコンポーネントには何も表示されません。

## 選択されたレコードの取得 <a href="#receive-selected-record" id="receive-selected-record"></a>

シート内で選択されているレコードは、選択イベント（`selectrecord`）を購読することで、配置元のコンポーネントで直接受け取ることができます。

{% hint style="info" %}
Sheetコンポーネントから発生するイベントを利用する場合は、「Publish Events」を有効にする必要があります。他のコンポーネントとの連携方法については「[Message Channel APIによる連携アプリケーションの開発](/mashmatrix-sheet/ja/customization/developing_apps_using_message_channel_api.md)」および「[動的インタラクションによるコンポーネント間連携](/mashmatrix-sheet/ja/customization/wiring_components_using_dynamic_interaction.md)」も参照してください。
{% endhint %}

{% hint style="info" %}
同じページに複数のSheetコンポーネントを配置する場合は、それぞれに異なる「Component ID」を指定してください。イベントの発生元の判別に利用されます。
{% endhint %}