コマンドバー ① 概要・Power Fxサンプル （Microsoft Power Apps Advent Calendar 2023/12/15）

はじめに

この記事は、Power Apps Advent Calendar 2023 12月15日担当分の記事です。(シリーズ2)
この後の記事も楽しみですねー。ぜひカレンダーの購読登録をお願いいたしますー！

先日JPPC2023（Japan Power Platform Conference 2023 ）のメインイベント
12/ 8 のアプリ＆サイト開発Application AP-09セッションで登壇させていただきました。

こちらの記事については別途自分ブログで書こうかと思いますが、
この中でお伝えしたモダンなコマンドバーについて、概要部分や実装サンプルの記事です。

TIPSPower Appsのスタンドアロンライセンス（有償ライセンス）が必要な範囲の記事となります。

Japan Power Platform Conference 2023 - メインイベント (2023/12/07 09:00〜)

# はじめに メインイベント 12/7-12/8の申し込みページです ワークショップ 12/6 申し込み ハッカソン 12/9 申し込み Microsoft より提供されている Power Platform のサービス、Power Apps / Power Automate / Power Virtual Agents / Power BI と Power Pages は、IT 業界に関わるエンジニアにとどまらず、すべての人が開発者になれることをビジョンとするローコード・ノーコードのサービスです。この Japan Power Platform Conference は、ア...

登壇の記事を書きました！こちらから登壇資料のダウンロードも可能です。

2023.12.08

JPPC2023 Japan Power Platform Conference 2023 – AP09セッション へカスタムページ・モダンコマンドバーで登壇しました！

★2024/2月更新 YouTubeに登壇動画アップしました！ 本家のYouTube動画の紹介動画をYouTubeチャンネルを立ち上げてアップしました！併せてご視聴ください～！https://youtu.be/PUam5v9ALQk?si=JTpbU0DUCg342hle...

コマンドバーとは

モデル駆動型アプリ上でビューやフォーム上の👆に出てくるボタンたちです。
公式：コマンド デザイナーの概要 – Power Apps | Microsoft Learn

ビュー、フォーム、サブグリッドなど種類に応じて表示されるコマンドは異なります。
また、レコードの選択状況（ビューから選択している場合のみ編集が出るなど）や、権限に応じて表示されるもの（削除権限がなければボタンが出ない）などと標準で調整されています。

標準で色々なコマンドが用意されています。これらに加えて、モダンなコマンドバーとして、
コマンドデザイナーからPower Fx、またはJavaScriptで新たにコマンドバーを追加できるようになっています！

TIPS実行する処理はPower Fx、またはJavaScriptのどちらかを選択して実装
表示制御は表示で固定、またはPower Fxでの制御が可能

NOTEモダンコマンドバーの編集はGAから1年以上は経っている記憶です。が、まだまだ活用例や記事などは見かけない。。
今後モデル駆動型アプリ⁺カスタムページ⁺コマンドバーという実装がスタンダードになっていけばなーという感じです。

コマンドバーの追加の流れ

モデル駆動型アプリデザイナー上から編集画面へ遷移できます。

コマンド バーをカスタマイズする – Power Apps | Microsoft Learn

テーブル編集画面上の「コマンド」からそのテーブルのコマンドバーが一覧表示できます。
ここからいずれか選択するとコマンドデザイナーへ遷移します。

コマンドバーの作成

ざっくり以下の流れです。
① 新規から種類を選択する。
　種類は以下です。公式から転記しておきます。

• コマンド。 標準ボタン。 選択するとアクションを実行します。 ドロップダウンおよび分割ボタン内でグループにネストすることもできます。 これらは、従来のコマンドではポップアップと呼ばれていたことに注意してください。
• ドロップダウン。 グループ内でコマンドを整理できるメニューを作成します。
• グループ。 ドロップダウンや分割ボタンにネストされたコマンド群にタイトルを追加します。
• 分割ボタン。 ドロップダウンに似ていますが、プライマリ コマンドがあります。 分割ボタンを選択すると、プライマリ コマンドのアクションが実行されます。 展開のシェブロンが選択されている場合、プライマリ コマンドは実行されません。 代わりに、リストが展開され、追加のグループ、ポップアップ、コマンドが表示されます。

② 表示する位置を決める

　　…メニューから上へ、下への移動が出来ます

③ ラベル（表示名）を指定して、アイコンの使用有無、使用する場合のアイコンを選択します。
※用意されているアイコン以外にWebリソースを使用にして用意した画像を使うことも可能です

④ アクションをPower Fxにする場合は「計算式の実行」を選択、JavaScriptにする場合は「JavaScriptの実行」を選択して実装する
※以下はPower Fxのサンプル。後の章でもう少し詳しく説明いれます

⑤ 表示を制御する場合は「式の条件を表示する」を選択してPower Fxで式を実装する

⑥ コマンドバーの実装が終わったら公開して保存、再生して確認

アプリに反映されるまでは数分かかる場合があります。アプリを開いた際に上部に最新版へアップデート中的なNotifyがでるので何度かリロードして反映されるのを待って確認しましょう。

アクション：Power Fxの実装例

上記で説明したPower Fxで実装する場合の例です。
OnSelectにコマンドバーでサポートされているPower Fxの関数を使って実装します。

公式：Power Fx コマンドを使用する – Power Apps | Microsoft Learn

詳細は上記の公式ページでご確認いただければと思いますが、それほどサポートされる関数は多くありません。
基本的にはIfなどの基本的な数式やConfirm関数、NavigateやNotify、更新系でPatch、複数対応はForAllなどを使って実装するイメージです。色々な実装例が公式に載っているので、それを参考に調整いただくのが良いかと思います。

サンプルで使っている関数
　・Confirm　→ダイアログで確認が出せる。はいとすればTrue、いいえはFalseとなる
　・Navigate　→カスタムページの他、ビューやフォームへの遷移が出来る
　・Notify　　→成功や失敗、情報などのNotify（通知）が出せる　※キャンバスとは異なり自動では消えない
　・PatchやForAll　→この辺でレコード情報を更新するなどの処理を行うイメージ

実装例：申請ボタン
動作：クリックするとダイアログで確認（メッセージとダイアログタイトルを指定）
　　はいの場合、Trueとなるので、Patchでステータスを更新する。
　　完了したら成功の通知を出す。

CodeIf(Confirm(“選択した見積を申請しますか？”,{Title:”申請確認”}),
Patch(見積,Self.Selected.Item,{申請ステータス:申請ステータス.申請済み});
Notify(“申請しました。”,NotificationType.Success);
);

という感じでダイアログを出しつつ、コマンドバーでレコードの特定の値を更新するという処理のサンプルです。
これ以外にも色々出来るのですが、その辺は登壇資料や今後作成予定のブログなどでご紹介予定です。

表示制御：Power Fxの実装例

表示制御は表示で固定するかPower Fxで条件に応じて表示、非表示を切り替えるかの実装です。

以下に例を挙げています。主にはレコードの列の値や選択されている状態、またレコードに対する権限（RecordInfoを使って）などで制御が出来るようになっています。

この辺も公式に載っているのでご参考ください。
Power Fx コマンドを使用する – Power Apps | Microsoft Learn

アクション：JavaScriptでの実装

アクションをJavaScriptで実装する場合の例としては、ダイアログでスタムページを開くという使い方しか思い当たりません。
他のレコード更新などはPower Fxを使った方が簡易だし保守性高い

こちらのサンプルについては、記事が長くなってしまうので、別の記事でまたご紹介予定です。
ひとまず以下公式などご参考ください。

公式：クラウド フローのカスタム ページでコマンドを使用する – Power Apps | Microsoft Learn

TIPSJavaScript使う実装はクライアントスクリプトと呼ばれます。
WebリソースにJavaScriptをアップしてファイルや関数を指定して実行するイメージ
今回はコマンドバーからの呼び出しですが、通常は表示時、保存時などのイベントに関連付けて実行することが出来ます。

コンポーネントライブラリで保持される

コマンドバーをデザイナーで作成すると、コンポーネントライブラリとして保持されます。
ソリューション内に自動でコンポーネントライブラリが追加されます。
開くと以下のようなコンポーネント編集画面で編集することも可能です。

別テーブルの追加やテーブルの更新反映はコンポーネントライブラリから行う

通常はコマンドデザイナー上で操作していればいいのですが、この画面も結構重要だったりします。
コマンドデザイナー画面では別のテーブルへの処理をそのまま追加が出来ない（出てこないです）
ので、この画面からデータソースとして別のテーブルを追加してあげる必要があります。
以下の例では取引情報テーブルをPatchしたいが出てこないので、この画面で追加しています。

データソースの選択＞対象テーブルを追加

すると追加したテーブルも使用できるようになります。

テーブルの列の値（たとえば選択肢を増やした）場合もコマンドデザイナー上だとそのままでは追加したものがでてくれません。テーブルの最新がうまく反映されないようです。（仕様なのか制限なのか不備なのかは不明）

その場合もこちらの画面でテーブルを最新化してあげれば追加、変更した情報が出てくれるようになります。

選択肢を追加後、出てこないので、テーブルを最新の情報に更新

追加した選択肢が選べるようになる（例では新規追加選択肢）

従来コマンド（リボン）はコマンドデザイナーでは編集不可（2023/12月時点）

先に従来からあるコマンドバーについて（リボンと呼ばれる。モダンと比較してクラシックと表記されてたりする）

元々ある標準のコマンドバーについては現時点ではコマンドデザイナー上では編集不可となっています。
いつかは従来のコマンドバーも同じように編集できるようになるとは記載があります。
そのうちに対応されるのかもしれません。

その他従来（クラシック）とモダンコマンドバーの違いが公式に載っていますのでご確認ください。
主には、モダンの場合は、
・Power Fxをサポート、カスタム工程が手早く、信頼性やパフォーマンスもよい
・アプリ固有のコマンドになる（テーブル、グローバルへもXMLの定義を変更して入れなおせば一応調整可能）
という感じです。
コマンド デザイナーの概要 – クラシック コマンドとモダン コマンドの主な違い

クラシックコマンドバー（リボン）の編集

従来のクラシックなコマンドバーを調整する場合は、以下公式のページを参考に対応となります。
コマンドとリボンのカスタマイズ (モデル駆動型アプリ) – Power Apps | Microsoft Learn

基本的にはソリューションをエクスポートしてZip化したものから、中身にあるcustomization.xml を直接編集して再度Zip化してインポートし直す。。というとても手間がかかり、知見が必要な作業となります。
→ここはさすがにコミュニティツールのリボンワークベンチ（RIBBON WORKBENCH）を使ってやるのが良いと思います。こちらであればツールで調整が出来ます。上記公式ページにもリンクがあります。
Develop 1 Ltd | Ribbon Workbench for Dynamics 365 & Dynamics CRM

コマンドのスコープ

作成するモダンなコマンドバーですが、アプリ単位のものとなります。
こちらは従来のコマンドバー（リボン）では出来なかったものです。

また、XMLを調整（ソリューションをZipで出して修正してZipで入れなおす）ことで
スコープをテーブル、またはグローバルと変更できるようです（手間なのでやったことはないです）

この辺りは公式情報ご確認下さい。
コマンドのスコープ – Power Apps | Microsoft Learn

スコープの種類について公式から抜粋

• アプリ これは、最新のコマンドデザイナーを使用してコマンドを作成または編集する際に、最も狭い範囲と既定の動作です。 コマンド デザイナーは、モデル駆動型アプリ、テーブル、コマンド バーの場所のコンテキスト内で開かれます。
• テーブル エンティティ スコープとも呼ばれます。 特定のテーブルとコマンド バーの場所にバインドされます。 特定のアプリにバインドされていません。 そのため、テーブルを使用するすべてのアプリで、テーブル スコープのコマンドがレンダリングされます。 例えば、取引先企業テーブルとメインフォームの場所を指定するテーブル スコープ コマンドは、取引先企業レコードのメイン フォームを表示する際に、すべてのアプリに存在することになります。
• グローバル これが最も広い範囲です。 グローバル スコープ コマンドは、コマンド バーの場所にのみバインドされ、アプリやテーブルにはバインドされません。 たとえば、メイン フォームの場所を指定するグローバル スコープのコマンドは、すべてのテーブルのメイン フォームを表示する際に、環境内のすべてのアプリに存在する。

他、制限事項などは公式をご確認ください。

おわりに

今回はJPPC2023で登壇させていただいた際にご紹介したモダンコマンドバーについての概要と作成サンプルをご紹介しました。
モデル駆動型アプリだとフォーム上にボタンを入れるなどが基本出来ないのですが、
上部コマンドバーにそういった処理を追加できるよ！というものです。
以前はこの辺をいじるのは大変厄介だったり知見が必要でしたが、Power Fxで対応できるようになりさらっと実装が出来るようになりました。とても良い機能追加だと思います。
その他、JavaScriptでカスタムページをダイアログで開く実装がお気に入りですが、また次の記事でご紹介しようと思います。それでは。