コマンドバー ② JavaScriptでダイアログでカスタムページを開く！

はじめに

この記事は、Power Apps Advent Calendar 2023 12月16日担当分の記事です。(シリーズ3)

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

以下の記事でカスタムページの概要とコマンドバーの概要として記事を書きました。
今回はコマンドバーその②としてカスタムページをダイアログで開くサンプルについてご紹介します。

カスタムページ ①概要 （Microsoft Power Apps Advent Calendar 2023/12/10） | Power Apps Tips ログ (youseibubu.com)

コマンドバー ① 概要・Power Fxサンプル （Microsoft Power Apps Advent Calendar 2023/12/15） | Power Apps Tips ログ (youseibubu.com)

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

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

コマンドバーとは

こちらについては前回の記事：コマンドバー ① 概要・Power Fxサンプル をご確認ください。
コマンドバーで出来る概要や作成の流れ、Power Fxでのサンプルなど記載しています。

本記事ではこのうち、JavaScriptの実装でカスタムページをダイアログで開くサンプルをご紹介します。

アクション：JavaScriptの実装例

アクションをJavaScriptで実装する場合の例です。
コマンドバーから呼び出す場合の使い道としてはダイアログでカスタムページを開くがメインとなるかと思います。
※レコード更新などの処理はPower Fxを使った方が簡易だし保守性が高い認識

以下でJavaScriptの実装、アップロードや設定など今回のサンプルをベースにご紹介します。
その他以下公式でも紹介がありますのでご参考ください。（説明少ないけど）

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

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

今回はフォーム上のコマンドバーにダイアログで事前に作成済みのカスタムページ（OCR解析ページ）を開くサンプルです。
ビュー上の場合も内容は同じです。

NOTE事前にカスタムページの作成が必要です。
またその名前をもとにJavaScriptファイルの作成が必要となります。
今回はカスタムページ作成の内容は割愛していますので、任意のページを作成してください。

ざっくり設定イメージ。JSファイルを登録してそのファイルや関数を呼び出す

① 事前にカスタムページを用意

今回は以下のカスタムページを作成している前提で進めます。
表示名：OCRサンプル　名前（name):new_ocr_421f9
※名前はページを作成するとランダムな英数字が付与された感じで作成されます。英語部分は残るようです。

② 事前にJavaScriptファイルを用意

上記のカスタムページをダイアログで開く実装が書いてあるJavaScriptファイルを用意します。
これはテキストファイルで書いて拡張子を[.js]として保存すればOKです。もちろん何かしらのツールで作成されてもよいです。

ダイアログで開くなどの書き方ですが、公式の以下ページに他のパターンを含めて載っています。
モデル駆動型アプリのカスタム ページとの間を、クライアント API を使用して移動する – Power Apps | Microsoft Learn

なのでそこからコピペしてページの名前(name)を変更すればいいくらいです。
後は幅やタイトルなどを調整くらいとなりますので、難易度は低いです。
注意点は外側を関数名で囲ってあげてその関数を呼び出すようにするのですが、上記のサンプルでは関数名部分は省略されているのでそれを足してあげる感じです。

実際に今回のサンプルで用意したJSファイルは以下です。
中央で開くダイアログのサンプルをもとに作成、ファイル名は「OCRPage.js」としています。

Code// Centered Dialog
function openDialog()
{
var pageInput = {
pageType: “custom”,
name: “new_ocr_421f9“,
};
var navigationOptions = {
target: 2,
position: 1,
width: {value: 80, unit:”%”},
title: “OCR解析“
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
.then(
function () {
// Called when the dialog closes
}
).catch(
function (error) {
// Handle error
}
);
};

③ コマンドバーの編集でJavaScriptを選択する

編集画面までの遷移、コマンドバーの作成の流れなどは前回記事ご参考ください。

以下のように今回はOCR解析という名前でコマンドバーを作成し、
アクションで「JavaScriptの実行」を選択します。

④ JavaScriptファイルをライブラリにアップして指定

次に、ライブラリの追加をクリックします。
JavaScript ライブラリの追加ダイアログで上部の「＋新しいWebリソース」をクリックします。
そうすると以下のように「新しいWebリソース」の入力画面がサイドに表示されます。

①で作成したJavaScriptファイルを指定します。
表示名や内部名は任意ですが今回は以下のような感じで指定しています。
表示名：OCRPage
名前：new_OCRPage.js　（ファイル名と同じにした）
種類：JavaScript(JS)

入力後「保存して公開」をクリックします。

ライブラリの追加ダイアログに戻るので、追加したライブラリを検索（この例ではOCRで検索）し
選択して「追加」をクリックします。

元の画面に選択したライブラリが表示されます。
次に呼び出す関数名を指定する必要があります。

TIPSライブラリのアップ部分は事前にWebリソースにアップしておいてそれをプルダウンで選択するでもOKです。

⑤  関数・パラメータを指定する

呼び出す関数名に今回の場合は 「openDialog」を入力して保存します。
これは①で作成したJSファイルに書いた関数（Function）名を指定しているということですね。
別の名前にする場合はその関数名を指定すればOKです。
パラメータは今回使用していないので空のままでOKです。

JSファイルに書いた関数（Function）を指定

上記まで終われば完了です。保存して公開して動作を確認してみましょう。

動作を確認

更新後、利用可能できますの表示後にリロード

コマンドバーなど作成・更新した後は反映までは以下のように表示されます。
「新しいバージョンのアプリを使用できます。クリックして更新してください。」
の表示が出たらリロードすると反映されるはずです。
※クリックしても特に更新はされずリロードが必要。。この点は前から謎。。

動作確認

今回はフォーム上のコマンドバーなのでフォームを開きます。
上部に作成したコマンドバーが表示されるはずです。
クリックすると以下のように作成したページがダイアログで表示されるはずです。
今回のサンプルではOCRコントロールを埋め込んだカスタムページを開き機能的な動作を
フォーム上でそのまま出来るイメージですね。

公式サンプル実装を使用して作れます

途中でもご紹介していますが公式の以下ページで、
中央ダイアログで表示、横に表示、全画面として表示など何種類かのサンプルが載っています。
基本同じ書き方でパラメータが異なる位です。

レコードのコンテキスト（レコードID）を渡してカスタムページ側でレコード取得して仕様する例もあります。

モデル駆動型アプリのカスタム ページとの間を、クライアント API を使用して移動する – Power Apps | Microsoft Learn

レコード情報を渡すサンプル

今回の実装サンプルの場合だとJavaScript実行の部分でパラメータにレコードIDを渡す
→FirstSelectedItemIdです。たしか💦
JavaScriptファイルも以下のように書き換えて実装するイメージです。
このレコードIDをカスタムページに渡してあげてページ側でレコードを特定して操作する感じですね。

コマンドバー＋カスタムページでよりシームレスな統合が可能！

上記のサンプルのように、コマンドバー（JavaScript実行）とカスタムページを合わせて使うと、
モデル駆動型のビューやフォーム上でそのままカスタムページを開けます。

カスタムページ上ではモデル駆動型のみでは実装が難しい機能的な画面を作成できます。
上記のOCR解析のページやアプリからフローを呼び出して処理をするページなどです。

TIPSこれらを別のキャンバスアプリを用意して実装することももちろん可能ですが、モデル駆動型アプリも使用している場合はカスタムページとして実装すれば同アプリ上から利用が出来ます。
さらにコマンドバーを使用してダイアログで開けばモデル駆動型アプリのビュー、フォーム上でそのまま機能的な画面を出して実行することが可能となります。
わざわざ別のアプリやページを開かずにそのまま実行できるという点がとても強力な組み合わせだと思っています。

さらにいうと、カスタムページはサイドリンクには出さずにこのダイアログ用に作成するというパターンでも良いかと思います。
内容によって、ページ単独で使用、ダイアログのみで使用、どちらでも使用と使い分けれますね。

おわりに

今回はモダンなコマンドバーの機能でJavaScriptの実行によるカスタムページのダイアログ表示についてご紹介しました。
個人的にはモデル駆動型アプリとキャンバスの機能的なアプリをシームレスに統合できるとても強力な機能と思ってます。
カスタムページはGAから約2年ほど、コマンドバーもGAからは1年以上経っていますが、あまり実例のお話は効かないので、まだまだ一般的ではないのかもしれません。

JPPC2023の登壇時にもご紹介したように、これらを取り入れれば開発の選択肢がさらに増えますし、
キャンバスアプリ（Power Fx）で培った技術を1アプリに取り入れることが出来ます。
標準機能で出来る様々なものはモデル駆動型アプリでノーコードで実現し、機能追加したい部分のみをPower Fx、Automateで実装、場合によってはプロ開発者も検討というイメージですね。
今後利用者が増えてスタンダードな実装になっていくのを願っていますｗそれでは！

後記：開発のすみ分けなど思うところ

モデル駆動型アプリは基本ノーコードで比較的容易に作成が出来るとはいえ、それ以外に知見が必要・検討すべき事項が山ほどあります（データ構成、リレーション、ノーコードロジック、セキュリティロール、部署・チーム、ソリューション、環境、ALMなどなど）
これらをキャンバスアプリやAutomate含めて一人で覚えて全部実装。。というのは市民開発としては現実味ないかと思います。（プロとして作成するならまた話は別ですがそれでも幅広い）

ある程度の規模のシステムの場合は、モデル駆動型アプリ・Dataverse関連担当、キャンバス（カスタムページ）担当、フロー（Power Automate）担当、環境関連担当、、という感じですみ分けて、得意分野を持ち寄ったチームでの開発を進めるのが良いのではと思います。

また、有償版のアプリ（というかシステム開発）レベルとなってくると、専門知識を持った人が社内にいないケースが多いと思いますし、ノウハウがなく初動に時間がかかる、将来的なリスクが見えないなど不安な点も多いと思います。
そういった場合はやはり技術的なアドバイス・開発支援を行ってくれるエキスパートがいる会社さんへご相談し、
一緒に進めて、知見を吸収しつつ後々自走していくというのが良いのではないかと感じます。
より大規模なシステムであれば設計・開発から運用サポートまでその部分はベンダーに担当いただくのももちろんありだと思いますし、自社で出来る範囲で内製化していくなど取り組み方は様々かと思います。

ローコードとはいえ、規模が広がるほどに必要な技術や知識、検討すべき事項は多岐に渡ってきます。
全部自分たちでやり切る。というよりは必要に応じてプロの手を借りて無理なく進める。
というのが一番マッチするよなーと日々感じております。それでは！