Power Appsでサイドペインを使ってみた

投稿日：2025/12/24
投稿者：関

同僚より、モデル駆動型アプリのサイドペインは使用したことがありますか？と言われたので使ってみました。

Power Appsのサイドペインとは

モデル駆動型アプリでは、画面の横（サイド）に追加のペイン（パネル）を開いて、別ページやレコード一覧、Web リソースなどを表示する UI 領域を動的に生成できます。
これを操作するための API が Xrm.App.sidePanes です。 この API を使って複数のサイドペインを作成・操作できます。
※詳しくは下記のMicrosoft Learnにて確認してください。

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

完成イメージ

取引先企業のフォームに表示している、取引先担当者のサブグリッドで編集時（データを選択し、「右で編集」ボタンをクリック）にサイドペインに編集用のフォームを開く
（簡易作成フォームと似たような動作）

使ってみました

1）Web リソースの作成

JavaScript作成（ChatGPTありがとうございます）

2）コマンドバー編集

・「右で編集」ボタン作成
・アクション：JavaScriptの実行
（ライブラリ：roit_sidepane.contact.js、関数名：openContactInSidePane）
・表示：ビューより１件選択時（数式バー）

動作確認

1)取引先企業のフォーム表示

2)取引先担当者のサブグリッドにて１件選択（「右で編集」ボタン表示）

3)「右で編集」ボタンクリックにて、サイドパネル表示

モデル駆動型アプリのサイドペインには、以下のような多様なコンテンツを表示できます

・エンティティビュー／レコード（フォーム）
・Web リソース（HTMLやカスタムページ）
・カスタムページ（柔軟に設計可能なページ）
・ダッシュボード、検索結果
・カスタムヘルプコンテンツ、およびキャンバスアプリなどの外部リソース

応用してパンくずリストの表示も作成してみました

まとめ

実際に Power Apps のサイドペインを試してみて、業務アプリにとって非常に有効な機能だと感じました。
特に、画面を切り替えることなく情報を横に展開できる点は、ユーザーにとっての操作性を大きく向上させます。
必要な情報にすぐアクセスできるため、日々の業務効率化に直結する仕組みだと思います。
シンプルな利用方法から始めても十分便利ですが、業務シナリオに合わせて応用することで、さらに実用的でわかりやすいアプリ体験を実現できるはずです。
皆さんもぜひ一度試してみてはいかがでしょうか。