クライアント API を使用してモデル駆動型アプリでサイドペインを作成する

開発者は、サイドペインのコレクションを表す Xrm.App.sidePanes API を使用して、モデル駆動型アプリ内でアプリのサイドペインを作成および管理できます。 createPane メソッドの呼び出しによって、モデル駆動型アプリフォームまたはカスタムページへのナビゲーションを可能にする新しいペインが追加されます。サイドペインに表示されるページは、最小幅が 300 ピクセル以内に収まり、ペインの幅に応じて大きな幅にサイズ変更する必要があります。

タブはサイドペインに、"閉じることができない"、および "閉じることができる" の 2 つのグループで一覧表示されます。各グループ内で、タブは作成された順序で一覧表示されます。上のグループにはユーザーが閉じることができないペインが含まれ、下のグループにはユーザーが閉じることができるペインが含まれます。 "閉じることができない" グループはアプリを開いたときに設定されますが、"閉じることができる" グループはアプリ内のユーザーアクションに応じて追加されます。

プラットフォームに付属するタイトルと [閉じる] ボタン付きのヘッダーを使用するか、カスタムヘッダーを使用することもできます。

サイドペインにバッジを追加して、変更に注意が必要であることをユーザーに示すことができます。バッジは、シンプルなドット、カウント、または画像の 3 つのモードをサポートしています。既定では、ユーザーがペインに切り替えるとバッジはクリアされます。バッジをいつクリアするかコントロールできます。

アプリのサイドペインは Web ブラウザでのみサポートされており、ネイティブプレーヤー内では使用できません。

注意

この API は、Model-driven apps のオンプレミス展開では利用できません。詳細: クライアント API は Customer Engagement (on-premises) でサポートされていません

この表では、この記事のサンプルを紹介します。

例	対象
サイドペインに生成 AI ページを表示する	サイドウィンドウを作成し、その ID で生成 AI ページに移動する方法。
サイドウィンドウに既定のビューを表示する	既定のテーブルビューを閉じることができないサイドペインに表示する方法。
テーブル行を表示する	非表示のヘッダーと指定した幅を持つ、閉じられるサイドペインにレコードを表示する方法。
Web リソースを表示する	HTML Web リソースを閉じることのできないサイドペインに表示する方法。
サイドペインを管理	ペインを折りたたむ、展開する、サイズ変更する、閉じる、バッジを設定する方法。
Xrm.App.panels.loadPanel で使用する	サイドウィンドウを`createPane`と共に使用し、`loadPanel`に切り替えて互換性の制限を回避する方法。

サイドウィンドウに生成ページを表示する

navigate と生成ページ ID を指定して、ペインの pageType: "generative" メソッドを使用します。

const pane = await Xrm.App.sidePanes.createPane({
    title: "My Generative Page",
    paneId: "GenPage",
    canClose: true,
    width: 400
});

await pane.navigate({
    pageType: "generative",
    pageId: "<genPageID>"
});

レコードコンテキストとカスタムパラメーターを渡す方法については、「生成ページへの移動と生成ページからの移動」を参照してください。

サイドウィンドウに既定のビューを表示する

次の例では、アプリのサイドウィンドウにテーブルの既定のビューを表示する方法を示します。予約リストと製品一覧が、閉じることのできないペインとして開きます。

Xrm.App.sidePanes.createPane({
    title: "Reservations",
    imageSrc: "WebResources/sample_reservation_icon",
    paneId: "ReservationList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_reservation",
    })
});

名前、備品、予約の開始日など、アクティブな予約の一覧を含む Reservations テーブルのスクリーンショット。

Xrm.App.sidePanes.createPane({
    title: "Products",
    imageSrc: "WebResources/sample_product_icon",
    paneId: "ProductList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_product",
    })
});

予約可能な製品の一覧を含む Products テーブルのスクリーンショット。

テーブル行を表示する

これは、サイドペインに行を表示する方法の例です。予約行がサイドウィンドウで開き、既定のヘッダーが非表示になり、幅が 600 ピクセルに設定されます。

Xrm.App.sidePanes.createPane({
    title: "Reservation: Ammar Peterson",
    imageSrc: "WebResources/sample_reservation_icon",
    hideHeader: true,
    canClose: true,
    width: 600
}).then((pane) => {
    pane.navigate({
        pageType: "entityrecord",
        entityName: "sample_reservation",
        entityId: "00aa00aa-bb11-cc22-dd33-44ee44ee44ee",
    })
});

個別レコードを開いたアクティブな予約リストのスクリーンショット。

Web リソースを表示する

この例では、Web リソースをサイドウィンドウに表示する方法を示します。カスタム HTML ページがサイドペインで開き、既定のヘッダーが表示され、[閉じる] ボタンが非表示になります。

Xrm.App.sidePanes.createPane({
                        title: "Registration Page",
                        imageSrc: "WebResources/msfp_SurveyIcon_32",
                        paneId: "RegistrationPage",
                        canClose: false
                    }).then((pane) => {
                        //navigate to webresource
                        pane.navigate({
                            pageType: "webresource",
                            webresourceName: "new_RegistrationPage",
                        })
                    });

サイドペインの管理

サイドペインを作成して、サイドペイン内に行またはビューを表示することの他に、次のこともできます。

state メソッドを使用してプログラムでサイドペインを折りたたむ:

Xrm.App.sidePanes.state = 0;
state メソッドを使用してプログラムでサイドペインを展開する:

Xrm.App.sidePanes.state = 1;
選択したペインを取得してプロパティを変更する:

var lastPane = Xrm.App.sidePanes.getSelectedPane();
lastPane.width = 400;
paneId パラメータを使用して特定のペインを取得する。

var reservationPane = Xrm.App.sidePanes.getPane("ReservationList");
reservationPane.close();
ペインのバッジプロパティを有効にする:

Xrm.App.sidePanes.getSelectedPane().badge = 1;

Xrm.App.panels.loadPanel で使用する

Microsoftは Xrm.Panels.loadPanel API を Xrm.App.sidePanes.createPane に置き換えます。前者は 1 つのペインのみをサポートし、後者は複数のペインをサポートしているためです。 loadPanel から createPane への移行を可能にするため、2 つの API は、いくつかの制限付きで連携して動作することができます。モデル駆動型アプリ内で loadPanel のみを使用する場合、エクスペリエンスは変わりません。ただし、loadPanel と createPane の両方を使用する場合、1つ目の制限事項は、loadPanel にプレースホルダーアイコンが表示されることです。 2 つ目の制限は、ユーザーが loadPanel から createPane に切り替えた際、アプリがメモリを節約するために loadPanel のコンテンツをアンロードし、元に戻った際に状態を保持せずに再読み込みしてしまうという点です。このタブ切り替え動作は、アプリで使用されるメモリを管理するためにマルチセッションアプリモード内で使用されるのと同じ動作です。ほとんどのページの種類は正しく復元されます。ただし、外部サイトまたは Web リソースを開くと、状態は復元されません。

createPaneを使用するように切り替えることで、アイコンを指定でき、alwaysRenderを有効にできるため、これら 2 つの制限を回避できます。 alwaysRenderは、ユーザーが切り替えたときにウィンドウの内容を保持しますが、より多くのメモリを使用するため、控えめに使用してください。

sidePanes (クライアント API 参照)
loadPanel (Client API 参照)
チュートリアル: 最初のクライアントスクリプトを記述する

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-10-31

クライアント API を使用してモデル駆動型アプリでサイド ペインを作成する

サイド ウィンドウに生成ページを表示する

サイド ウィンドウに既定のビューを表示する