# Sheetコンポーネント Lightning Experience環境では、作成したシートを画面部品としてページ内に配置できる「Sheetコンポーネント」を利用できます。これによってホーム画面やレコード詳細ページなどでもMashmatrix Sheetのレコード閲覧・編集のインターフェースを利用することが可能になります。 ### Sheetコンポーネントが利用できる環境 Sheetコンポーネントは以下の環境で現在利用が可能です。 * Lightningページ（レコードページ、ホームページ、アプリケーションページ） * Experience Cloud内ページ * 画面フロー * Lightningユーティリティーバー ### Lightning ページ内へのSheetコンポーネントの配置 ここでは例としてLightningページにSheetコンポーネントを配置する手順を記します。 ![](https://2817247209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2wT6ommdiuYru74JEtd%2Fuploads%2Fgit-blob-3ba86c6aff1d120c7b20af822b4c6408911fd545%2Fsheet_component_in_app_builder.png?alt=media) 1. ページ内に配置したいブックのブック設定、あるいはシートのシート設定から、ブックIDおよびシートIDを確認しメモしておきます。 2. Lightning アプリケーションビルダーにアクセスし、Sheetコンポーネントを配置したいページを開きます。 3. 画面左側のコンポーネント一覧から「Mashmatrix Sheet」を検索し、該当のコンポーネントをドラッグしてページ内の領域にドロップします。 4. ドロップしたコンポーネントが選択された状態で、右側のプロパティ設定から「Book ID」として先程メモしたブックIDを入力します。 5. ブック内の特定のシートのみを表示したい場合は「Sheet ID」に先程メモしたシートIDを入力します。 6. コンポーネントの高さを指定する場合、「Height」に高さを指定します。 7. 必要に応じてコンポーネントのヘッダとなるタイトルを「Title」に入力します。 ### Sheetコンポーネントのプロパティ * **Title** - Sheetコンポーネントに表示するタイトルを設定します。タイトルが未設定の場合は指定したブック／シートの内容のみが表示されます。 * **Book ID** - コンポーネントとして表示するブックのIDを設定します。 * **Sheet ID** - 表示するシートのIDを指定します。省略するとブック全体が表示されます。 * **Record ID** - コンテキストとなるレコードのIDを指定します（Experience Cloudサイト内ページ、および画面フローに配置したときのみ入力可能） * **Height** - コンポーネントの高さを指定します。高さには「数値＋単位」のようにCSSで用いられる形式で大きさを指定できます。単位としてはpx, em, rem, %, vh, vwがサポートされています。単位を省略した場合はpx（ピクセル）として取り扱われます。 * **Publish Events** - Message Channel API や動的インタラクションを利用して、このコンポーネントから発生するイベントに連動するコンポーネントを開発・利用する場合にチェックします。 * **Component ID** - コンポーネントを特定する任意の文字列を指定します。Message Channel APIなどでイベントの発生元を特定するために利用可能です。 * **Target Object Names** - コンポーネント内のシートに対して、「関連するレコードID」として伝達される対象となるオブジェクトをAPI名で（複数の場合はコンマ区切りで）指定します（ユーティリティバー内に配置したときのみ入力可能）。これにより画面遷移時にユーティリティバー内のSheetコンポーネントが特定のオブジェクトのレコードの表示を検知して動的に表示内容をアップデートすることが可能になります。 * **Parameters** - コンポーネントに対して渡されるパラメーターの名前と値の組をURLクエリパラメーター形式（ 例: `param1=value1¶m2=value2` ）で指定します。指定されたパラメーター値は[フィルタの参照値](https://docs.mashmatrix.com/mashmatrix-sheet/ja/functions_about_displaying_data/reference_value)として列のフィルタから参照できます。 ### レコードページに配置するシートのフィルタ設定 Sheetコンポーネントをレコードページやユーティリティバー内に配置する場合に、表示しているレコードに関連したもののみがシート内に表示されるようにするためには、あらかじめ配置されるシートに対して適切にフィルタ設定がされている必要があります。 レコードに関連したものが表示されるようにフィルタを設定するには、以下の手順に従います。 1. レコードページのオブジェクトへの参照ID項目をシート内の列として追加します。 2. 1\) で追加した列の列メニューからフィルタを選択します。 3. フィルタ設定ダイアログで、フィルタ値入力ボックスの右にある「参照値選択ボタン」をクリックし、参照値選択ダイアログを表示します。 4. ダイアログから参照の種別として「関連するレコードID」を選択し、フィルタを適用します。 5. 必要に応じて、1) で追加した列を非表示に設定します。 たとえば、取引先レコードページに商談シートを配置する場合は、商談シートに「取引先ID」項目を列として追加します。追加した「取引先ID」列のフィルタ設定で参照値として「関連するレコードID」を選びます。 ### 新規レコードの自動関連設定 レコードページに配置したSheetコンポーネントの中で新規レコードを作成する際、以下の場合には新規レコードに現在表示しているレコードのIDが自動的に設定されます。 1. フィルタを設定した列に表示している参照ID項目がシート内に表示している主オブジェクトに直接所属している項目である * 例：取引先レコードページにケースを一覧するシートを表示している場合、「取引先ID」項目でのフィルタは対象となるが、「取引先 > 取引先ID」項目や「親ケース > 取引先ID」項目などでのフィルタでは対象とならない 2. フィルタを設定した列に表示している参照ID項目が編集可能である ### 画面フロー内でのSheetコンポーネント 画面フロー内でSheetコンポーネントを利用する場合は、シート内で選択したレコードの情報を後続のフロー要素で活用することも可能です。これによりMashmatrix Sheetの柔軟なデータ一覧・抽出の機能を利用したユーザー主導の絞り込みと自動処理の組み合わせが可能になります。 画面フロー内に配置したSheetコンポーネントは以下の出力パラメータをフローに引き渡します。 * **Selected Record ID (selectedRecordId)** - 現在選択中あるいはフォーカスしているレコードのID（単件）を出力します * **Selected Record IDs (selectedRecordIds)** - すべての選択中のレコードのIDを配列形式で出力します * **Focused Sheet ID (focusedSheetId)** - フォーカスされているシートのIDを出力します。複数のシートを持つブックをSheetコンポーネントに配置する場合に利用可能です。 ### 旧来型Sheetコンポーネント 現行の「Mashmatrix Sheet」コンポーネントとは別に、リリース34.0より前のSheetコンポーネントは「Mashmatrix Sheet (Legacy)」としてコンポーネント一覧から利用できます。この旧来型のSheetコンポーネントには一部にLightning Auraテクノロジーが利用されており、最新のLightningプラットフォームでの利用に制限がありました。 新しいSheetコンポーネントには旧来型Sheetコンポーネントと比較して以下の特徴があります。
新しいSheetコンポーネント旧来型Sheetコンポーネント
実装技術Lightning Web コンポーネントLightning Web コンポーネント + Lightning Aura コンポーネント
Experience Cloudでの利用LWRサイト＋AuraサイトAuraサイトのみ
動的インタラクション対応なし
パラメーター指定対応なし
{% hint style="info" %} リリース34.0よりも前からSheetコンポーネントを利用しているページでは、ページを編集して変更を行わない限り「Mashmatrix Sheet (Legacy)」がそのまま利用されます。旧来型Sheetコンポーネントの動作サポートは継続されますが、今後追加される新機能は新しいSheetコンポーネントにのみ追加される可能性があります。新規にページに追加する場合は新しいSheetコンポーネントを利用するようにしてください。 {% endhint %}