クライアント API を使用したサイドペインの作成

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

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

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

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

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

注意

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

使用例

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

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",
    })
});

名前、備品、予約の開始日など、アクティブな予約のリストを含む予約テーブルを表示しているスクリーンショット。

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

予約可能な製品のリストを含む製品テーブルを表示しているスクリーンショット。

テーブル行を表示する

これは、サイドペインに行を表示する方法の例です。予約行がサイドウィンドウで開き、既定のヘッダーが非表示になり、幅が 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 で使用する

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

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

sidePanes (クライアント API 参照)
loadPanel (Client API 参照)
手順解説: 最初のクライアントスクリプトを作成する

フィードバック

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

最終更新: 2026-10-10

クライアント API を使用したサイド ペインの作成

使用例

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

サイド ペインに既定ビューを表示する