Power Appsのモデル駆動アプリのフォームにカスタムページをダイアログ形式で表示してみる

モデル駆動型アプリを利用していると、独自のダイアログを表示したいときや、追加の情報を参照したいときがあります。

その際は、標準的な機能として簡易表示コンポーネントやサブグリッドを利用する事が考えられます。しかしながら、Javascriptを利用した高度なコーディング技術を要し、デザイン性も求められることが懸念です。

そこで、デザイン性のカスタマイズに長けるカスタムページを利用して、モデル駆動型アプリの画面上に組み込むことで、前述した懸念が解消されます。*1

今回は、モデル駆動型アプリのフォーム上にコマンド（ボタン）を配置し、カスタムページをダイアログとして表示します。

カスタムページの準備
- カスタムページの作成
- カスタムページのID取得
Webリソースの準備
コマンドとモデル駆動型アプリの準備
- コマンドの準備
- モデル駆動型アプリの準備
最後に

カスタムページの準備

まずは、ダイアログとして表示したい画面をカスタムページとして準備します。

カスタムページの作成

カスタムページ内の制御は本記事ではあまり重要ではないため、今回は簡単なWelcomeページを作成します。

１．Power Appsの管理画面から対象のソリューションを開き、「＋新規」＞「アプリ」＞「ページ」を押下します。

２．「＋挿入」＞「ラベル」を押下し、任意のテキストを入力していきます。

カスタムページ内の制御や表示形式等は今回あまり重要ではないため、簡単なWelcomeページを作成しました。

なお、カスタムページ内のカスタマイズは、キャンバスアプリと同じように実施することが出来ます。詳細は下記公式ページを参照ください。

モデル駆動型アプリのカスタムページにキャンバスコンポーネントを追加する - Power Apps | Microsoft Learn

カスタムページのID取得

後ほど作成したカスタムページのIDが必要になりますので、下記手順で値を控えます。

１．作成したページから「⋮」＞「詳細」＞「ソリューションレイヤーの表示」を押下します。

２．表示された項目から1つ目の項目を押下すると、右側に詳細が表示されます。

　各項目の中で「name」と書かれた項目がIDとなります。

Webリソースの準備

次にWebリソースを準備します。今回はJavascriptをWebリソースとして登録し、作成した画面（カスタムページ）をダイアログとして表示します。

参考にした公式ページは下記です。

learn.microsoft.com

今回はモデル駆動型アプリのフォーム中央部分にダイアログを表示してみます。下記のようなイメージとなります。

それでは、実際にWebリソースを登録します。

※今回はPower Appsの管理画面で直接Javascriptを書きましたが、Visual Studioで作成したJavascriptコードファイルを添付する方法でも登録が可能です。

１．Power Appsの管理画面から対象のソリューションを開き、　「＋新規」＞「その他」＞「Webリソース」を押下します。

２．画面右側に登録画面が表示されますので、「ファイルの種類」を「Javascript」に指定します。

３．太字部分は実際に作成した画面（カスタムページ）のIDに修正し、コード枠に貼り付け保存します。

function onClickFunc() {
   var pageInput = {
    pageType: "custom",
    name: "cli_welocome_1a838"
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 50, unit:"%"},
    title: "カスタムページが下記に表示されます"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );
}