---
title: "モデル駆動型アプリにダイアログを表示 | モーダル画面 | ポップアップ"
url: "https://www.geekfujiwara.com/tech/d365/2560/"
author: ギークフジワラ
published: "2023-02-14T06:38:19+00:00"
updated: "2023-02-25T19:34:28+00:00"
categories: [Dynamics 365, Power Platform]
tags: [Dynamics 365, JavaScript, Microsoft, Power Apps, Power Platform, PowerApps, カスタムページ, ダイアログ, モーダル]
description: "どうもギークです。 モデル駆動型アプリにはフォーム、ビューの他にページというキャバスアプリをベースとしたカスタムページという画面があります。こちらを利用して自由度の高いセンターダイアログ、サイドダイアログ、フルページのような形式で表示させる…"
---

# モデル駆動型アプリにダイアログを表示 | モーダル画面 | ポップアップ

どうもギークです。

モデル駆動型アプリにはフォーム、ビューの他にページという==キャバスアプリ=={.red}をベースとした==カスタムページ==という画面があります。こちらを利用して自由度の高いセンターダイアログ、サイドダイアログ、フルページのような形式で表示させることができます。以下は==サイドダイアログ==での表示の例です。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-6-1024x482.png)

マイクロソフト公式ページではカスタムページへのナビゲーションはこちらの記事で紹介されています。

[モデル駆動型アプリのカスタム ページとの間を、クライアント API を使用して移動する - Power Apps \| Microsoft Learn](https://learn.microsoft.com/ja-jp/power-apps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples)

今回はこちらの作成方法を手順含めて紹介いたします。

## 参考記事

カスタムページの種類は以下の関連記事で紹介しています。

https://www.geekfujiwara.com/tech/powerplatform/1930/

## ダイアログ開発の概要フロー

今回はこちらのダイアログ (メインフォーム上にカスタムページをポップアップする) 形式の開発手法をご紹介します。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>トリガーは既存のNavigate API を利用します。これはJavaScript を少し書く必要があります。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

今回は参考にポップアップして承認を行うダイアログを表示する機能を作成します。

:::raw
<!-- wp:sgb/timeline -->
<div class="wp-block-sgb-timeline"><div class="sgb-tl"><!-- wp:sgb/timeline-item {"itemTitle":"カスタムページの作成"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">カスタムページの作成</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>カスタムページの作成方法を確認します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>カスタムページの作成方法として、ナビゲーションメニューに表示しない方法を選択して実行します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item -->

<!-- wp:sgb/timeline-item {"itemTitle":"コマンドの開発"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">コマンドの開発</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>コマンド自体の開発、JavaScript を利用したコードの記述を行います。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コマンドバーへの追加とコマンドバーでの表示・非表示条件を設定します。</p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item -->

<!-- wp:sgb/timeline-item {"itemTitle":"モデル駆動型アプリへの反映"} -->
<div class="wp-block-sgb-timeline-item sgb-tl-item"><div class="sgb-tl-item__label--default"></div><div class="sgb-tl-item__title">モデル駆動型アプリへの反映</div><div class="sgb-tl-item__main"><!-- wp:paragraph -->
<p>モデル駆動型アプリへのカスタムページの追加を行います。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div><div class="sgb-tl-item__marker main-bdr main-bc"></div></div>
<!-- /wp:sgb/timeline-item --></div></div>
<!-- /wp:sgb/timeline -->
:::

## カスタムページの作成

### カスタムページの新規作成

カスタムページを作成します。一般にカスタムページの作成方法は2種類ありますが、モデル駆動型アプリのナビゲーションメニューに表示させたくないため、今回はソリューションからの作成を行います。

ソリューションにアクセスします。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>今回はナレッジ管理アプリというアプリにカスタムページのポップアップ機能を追加します。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-12.png)

ソリューションの新規からページを選択して作成します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-13.png)

### 画面のサイズ指定

最初に、画面のサイズを指定します。

画面のサイズは設定&gt;表示で設定します。今回はサイドダイアログとして狭い幅で表示したいので、500pxを指定しています。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-15.png)

モデル駆動型アプリで開いているフォームのレコード情報を受け取って利用することができるようにしたいので、App.OnStartプロパティに以下を記載します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-1024x268.png)

:::raw
<!-- wp:sgb/codebox {"title":"Power Fx","source":"Set(RecordItem, \r\n    If(IsBlank(Param(\u0022recordId\u0022)),\r\n        First(ナレッジ),\r\n        LookUp(ナレッジ, ナレッジ = GUID(Param(\u0022recordId\u0022))))\r\n)"} -->
<div class="wp-block-sgb-codebox pre_tag"><span><i class="fa fa-code"></i>Power Fx</span><pre><code>Set(RecordItem, 
    If(IsBlank(Param("recordId")),
        First(ナレッジ),
        LookUp(ナレッジ, ナレッジ = GUID(Param("recordId"))))
)</code></pre></div>
<!-- /wp:sgb/codebox -->
:::

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>「ナレッジ」と書かれているところは接続したいテーブル名に変更するようにしてください。3つ目の「ナレッジ」はGUIDが保存されている列名です。デフォルトではテーブル名が自動的に設定されています。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

### フォームの配置

カスタムページの作成内容は用途によって様々、自由ですが、今回は詳細の表示と承認ワークフローへの連携機能を作成しようと思います。

ポップアップが表示されたら、たとえばフォームコントロールを利用してレコードの詳細を表示しつつ、コメント欄と承認ボタンを配置しておきます。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>RecordItem 変数にはフォームで開いているレコード情報が入っています。こちらをフォームに利用して表示するようにしています。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-14-1024x602.png)

承認ワークフロー機能はカスタムページの開発自体とは無関係のため省略します。

### 公開

カスタムページを公開します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-28.png)

## コマンドの開発

### カスタムページのオブジェクト名の確認

カスタムページのオブジェクト名を確認します。

ソリューションレイヤーからコピーすることができるので確認します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-29.png)

==name ==にかかれている値をコピーしておきます。こちらがカスタムページの==オブジェクト名==であり、後にJavaScript 記述にて利用します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-30-1024x536.png)

### テーブルの論理名の確認

利用するテーブルの情報も利用する必要がありますので、こちらのオブジェクト名も確認しておきます。対象のテーブルをクリックして、プロパティをクリックします。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-31.png)

高度なオプション配下にある==論理名==を確認しておきます。こちらはJavaScript のコードにおける==entityName ==に利用します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-33.png)

### JavaScript を記述

Visual Studio Code にてJavaScript を記述します。

:::raw
<!-- wp:sgb/message {"message":"Visual Studio Codeのダウンロード"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">Visual Studio Codeのダウンロード</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>アプリをインストールしていない場合、こちらからダウンロードすることができます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://code.visualstudio.com/">Visual Studio Code - Code Editing. Redefined</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

先ほどコピーしたオブジェクト名を利用して以下のように記述します。

:::raw
<!-- wp:sgb/list {"borderStyleClassName":"li-check","values":"\u003cli\u003ename にはカスタムページのオブジェクト名を利用します。\u003c/li\u003e\u003cli\u003eentityName には先程取得したテーブルの論理名を利用します。\u003c/li\u003e","listId":"RPR0CNoAY"} -->
<div class="wp-block-sgb-list"><div class="li-check"><ul><li>name にはカスタムページのオブジェクト名を利用します。</li><li>entityName には先程取得したテーブルの論理名を利用します。</li></ul></div></div>
<!-- /wp:sgb/list -->
:::

:::raw
<!-- wp:sgb/codebox {"title":"JavaScript","source":"function sideDialog(recordId) {\n    var pageInput = {\n       pageType: \u0022custom\u0022,\n       name: \u0022geek_kbmodal_c4043\u0022,\n       entityName: \u0022geek_knowledge\u0022,\n       recordId: recordId.replace(/[{}]/g, \u0022\u0022),\n       };\n   var navigationOptions = {\n       target: 2, \n       position: 2,\n       width: {value: 500, unit: \u0022px\u0022},\n       title: \u0022ナレッジの承認\u0022\n   };\n   Xrm.Navigation.navigateTo(pageInput, navigationOptions)\n       .then(\n           function () {\n               // Handle success\n           }\n       ).catch(\n           function (error) {\n               // Handle error\n           }\n       );\n};"} -->
<div class="wp-block-sgb-codebox pre_tag"><span><i class="fa fa-code"></i>JavaScript</span><pre><code>function sideDialog(recordId) {
    var pageInput = {
       pageType: "custom",
       name: "geek_kbmodal_c4043",
       entityName: "geek_knowledge",
       recordId: recordId.replace(/&#91;{}]/g, ""),
       };
   var navigationOptions = {
       target: 2, 
       position: 2,
       width: {value: 500, unit: "px"},
       title: "ナレッジの承認"
   };
   Xrm.Navigation.navigateTo(pageInput, navigationOptions)
       .then(
           function () {
               // Handle success
           }
       ).catch(
           function (error) {
               // Handle error
           }
       );
};</code></pre></div>
<!-- /wp:sgb/codebox -->
:::

ファイル名をopendialog.js として保存します。

:::raw
<!-- wp:sgb/message {"message":"recordId のreplace コードについて"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">recordId のreplace コードについて</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>パラメーターはモデル駆動型アプリからJavaScript に引数として渡すことのできるデータを示します。<span class="keiko_blue">FirsrPrimaryItemId</span> は、メインフォームで開いているデータのID (GUID) です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>JavaScript 上でパラメータとして渡しているrecordId はレコードのGUIDですが、<span class="keiko_yellow">{0000-0000-0000-0000} </span>という波括弧付きでデータが渡されます。そのため、本記事で紹介しているJavaScriptでは波括弧を削除してからIdとして渡すコードに改善しています。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

### コマンドの作成

モデル駆動型アプリを編集して、コマンドデザイナーを開きます。

ページを開き、コマンドバーを配置したいテーブルであるナレッジを選択してコマンドバーの編集とします。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-16.png)

コマンドを配置する場所を選択します。今回はメインフォームにします。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-17.png)

コマンドを選択して新しく追加します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-18.png)

名称やJavaScriptで実行、アイコンは自由に設定します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-19-1024x345.png)

### JavaScriptとの関連付け

ライブラリを追加します。先程Visual Studio Codeで作成したJavaScript ファイルをWeb リソースとしてアップロードします。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-20-1024x507.png)

先ほど作成したJavaScript ファイルを検索してコマンドと関連付けます。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>以下ではファイル名がopendialog.js の場合です。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-21.png)

### Function 指定と引数渡し

JavaScript 内のFunction 名を指定、パラメーターとしてFirstPrimaryItemId を指定します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-22.png)

:::raw
<!-- wp:sgb/message {"message":"パラメーター"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">パラメーター</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>パラメーターはモデル駆動型アプリからJavaScript コードにコマンド実行時に引数として渡すことのできるデータを示します。<span class="keiko_yellow">FirsrPrimaryItemId </span>は、メインフォームで開いているデータのID (GUID) です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>元々のデータはXML 形式で保存されていますが、画面上で編集できるようになりました。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

### コマンドの表示条件

コマンドが表示される条件を記述します。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>コマンドの表示条件はPower Fx で記述することができます。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-23-1024x449.png)

ここでは、==内容にデータが入っているとき==には承認コマンドが表示されるようにします。

:::raw
<!-- wp:sgb/codebox {"title":"Power Fx","source":"If(IsBlank(Self.Selected.Item.内容), false, true)"} -->
<div class="wp-block-sgb-codebox pre_tag"><span><i class="fa fa-code"></i>Power Fx</span><pre><code>If(IsBlank(Self.Selected.Item.内容), false, true)</code></pre></div>
<!-- /wp:sgb/codebox -->
:::

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>現在フォームで開いているレコードを受け取るには、<span class="keiko_yellow">Self.Selected.Item</span> と記述する必要があります。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

### コマンドの公開

コマンドを公開します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-24.png)

## モデル駆動型アプリへの反映

### カスタムページの追加

追加を行いたいモデル駆動型アプリを選択して編集します。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>今回は引き続きナレッジ管理アプリを利用します。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

カスタムページを一旦モデル駆動型アプリに追加します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-7-1024x619.png)

ページの追加を選択します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-8.png)

カスタムページを選択して、次へとします。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-9.png)

既存のカスタムページを選択して、ナビゲーションに表示するのチェックボックスを外します。

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>「ナビゲーションに表示する」のチェックボックスをオフにすることでメニューに表示されないようになります。ポップアップ画面はメニューに表示させる必要がないため、必ず外しておきます。</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:sgb/message -->
:::

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-10.png)

正しく行うと、以下のように「ページ」に追加されます。メニューには追加されていません。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-11.png)

### モデル駆動型アプリの公開

カスタムページを追加した内容をアプリに反映するため、モデル駆動型アプリを公開します。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-3.png)

ここまでで、以下の必要な手順が完了しました。

:::raw
<!-- wp:sgb/list {"borderColor":"#009EF3","borderStyleClassName":"ol-circle","values":"\u003cli\u003eカスタムページの作成\u003c/li\u003e\u003cli\u003eコマンドバーの作成\u003c/li\u003e\u003cli\u003eモデル駆動型アプリへの適用\u003c/li\u003e","listId":"qHr4ugfmM"} -->
<div class="wp-block-sgb-list"><div class="ol-circle"><ol style="border-color:#009EF3"><li>カスタムページの作成</li><li>コマンドバーの作成</li><li>モデル駆動型アプリへの適用</li></ol></div></div>
<!-- /wp:sgb/list -->
:::

## モデル駆動型アプリでの確認

ナレッジの承認をが内容が入っているときには表示されます。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-25-1024x464.png)

:::raw
<!-- wp:sgb/message {"message":"メモ"} -->
<div class="wp-block-sgb-message"><div class="memo sng-shadow-0" style="border-radius:0px;background-color:#fff9e6;color:#ffb36b"><div class="memo_ttl dfont"><span class="sng-box-msg__icon" style="background:#ffb36b"><i class="fas fa-pencil-alt"></i></span><div class="sng-box-msg__title">メモ</div></div><div class="sng-box-msg__contents"><!-- wp:paragraph -->
<p>内容が入力されていないときにはコマンドが表示されません。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2591,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-26-1024x586.png" alt="" class="wp-image-2591"/></figure>
<!-- /wp:image --></div></div></div>
<!-- /wp:sgb/message -->
:::

「ナレッジの承認」コマンドをクリックするとこちらのように作成したカスタムページが表示されます。

![](https://www.geekfujiwara.com/wp-content/uploads/2023/02/image-27-1024x445.png)

以上、ご参考に慣れば幸いです。