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

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

Sheetコンポーネント自体およびLightningページへの配置方法については「Sheetコンポーネント」を参照してください。

テンプレートへの配置

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

<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コンポーネント」の「Sheetコンポーネントのプロパティ」を参照してください。

表示するブック・シートの動的な変更

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

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

選択されたレコードの取得

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

Sheetコンポーネントから発生するイベントを利用する場合は、「Publish Events」を有効にする必要があります。他のコンポーネントとの連携方法については「Message Channel APIによる連携アプリケーションの開発」および「動的インタラクションによるコンポーネント間連携」も参照してください。

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