この記事は、Power Apps Advent Calendar 2023 12/25 担当分の記事です。
Power PagesってPower Appsじゃなくね？というツッコミがあるかと思いますがご了承くださいm(__)m
※以前はPower Apps Portalsという名前でPower Appsの一部だったので許してね！w
最近お仕事でPower Pagesをいじることがあったので、自分の理解これで合ってるのかなーという確認も含めて、正直あまり自信はないのですが基礎的な部分からアウトプットをしてみることにしました。
本記事では、Power Pagesに触れたことのない方が、サイトの作成から最低限の一覧画面と入力フォーム画面を作れるようになるところまでをスコープとしています。
もし「その理解ちょっと違うよ」とか「こうしたらもっと楽だよ！」などありましたら、是非是非ご意見ください。
- 作業全体像
- 各手順
- 最後に動作を確認
作業全体像
作業手順はおおよそ以下のようになると思います。
- サイトを作成する
- テーブルを用意する
- 一覧ページを作成する
- 新規入力フォーム画面を作成する
- 編集フォーム画面を作成する
- 各画面の遷移を設定する
以降では、上記の各手順について紹介していきます。
各手順
1. サイトを作成する
1-1. Power Pagesのトップ画面を開く
https://make.powerpages.microsoft.com/ にアクセスします
Power Appsからも飛べます
1-2. 「最初から始める」を選択する
テンプレートをベースに作成する方法もありますが、今回はテンプレートなしで作っていきます
1-3. 必要項目を入力し「完了」を選択する
サイトの名前は日本語が使えないので注意
1-4. 待つ
しばらくすると、以下のような設計スタジオ画面に遷移します。
これでサイトの作成は完了です。
2. テーブルを用意する
2-1. 「データ」を選択する
現在のPower Pagesでは、設計スタジオ上でテーブルを作成することができるようになっていますので、その機能を使ってみましょう。
なお、Power Appsの画面からテーブルを作成してもOKです。
2-2. 「＋表」→「＋新しいテーブル」を選択する
2-3. テーブル名とプライマリ列名を設定する
今回は保険会社に住所変更申請するWebページ、というシナリオにしてみました。
（最近引っ越しが多くこの手続きにとても手間がかかったので。。）
テーブル名やプライマリ列の設定時に、「高度なオプション」で「スキーマ名」を指定することもお忘れなく。
必須入力ならオプションじゃねーだろ！というツッコミたくなるのはさておき…
2-4. プライマリ列をオートナンバーにする
プライマリ列は自動採番にしたいので、オートナンバーに変更します。オートナンバーにする際は列の入力を任意にしておく必要があります。
2-5. 列を追加する
氏名、証券番号、新住所、電話番号、変更タイミング、変更適用日の列を追加します。
2-3.と同様に、スキーマ名を設定することをお忘れなく。
こんな感じになりました。
変更タイミングは選択肢列で、「即時」と「指定日」を選択できるようにしました。
「指定日」を選択した際に、変更日列に日付を設定してもらうイメージです。
2-6. ビューを作成する
Power Pagesでは、モデル駆動型アプリと同じように、テーブルの一覧やフォームの"もと"はDataverse側で作成します。
既存のビューを利用してももちろんOKですが、今回は新たにビューを作ってみます。
「＋列を表示する」からテーブルに追加した列を一通り配置したら、保存して公開します。
2-7. フォームを作成する
今度はフォームタブから、新たにフォームを作成してみます。
申請IDと所有者の列は、ユーザーが入力するものではないので、非表示にしました。
こんな感じになったら、保存して公開します。
なお、今後の確認作業のために、1レコード以上テストデータを登録しておくとよいです。
3. 一覧ページを作成する
3-1. ホームのページにリストを配置する
画面左側のページタブでWebページの編集画面に戻り、ホームのページ内にリストを配置します。
3-2. リストを設定する
リストを配置するとリストの設定ポップアップが表示されるので、先ほど作成したテーブルとビューを選択します。
ひとまず現時点ではここまでで「完了」を選択します。
3-3. アクセス権を設定する
リストに先ほどのテーブルやビューを設定しただけでは、アクセス権が付与されておらず、まだ「誰にも見せない状態」になっています。
ここがPower AppsとPower Pagesの考え方の違うポイントの一つかなと思います。
アクセス権を付与していきます。
この辺りは解説し始めると長くなるので、ひとまずCRUD（作成、読み取り、更新、削除）権限を匿名ユーザーに対して許可します。
下図のように設定し、保存を選択します。
※ちなみにこの時点では作成したサイトは非公開となっており、URLを知っていてもアクセスできない状態になっています。
心配な方は以下の設定が非公開になっていることをご確認ください。
3-4. 確認してみる
ここまで出来たら、画面右上のプレビューから、一覧画面ができているか確認してみましょう。
問題なければ、以下のようなページが表示されると思います。
この一覧に新規、編集、削除などのボタンを追加する作業は、後の工程で行います。
4. 新規入力フォーム画面を作成する
4-1. 新規入力フォームのページを追加する
続いて、新規入力フォーム画面を作ります。
フォームは、別のページとして用意する方法以外にも、ポップアップで表示させる方法もありますが、今回はページを分けて作成してみます。
画面左上の「＋ページ」から、新規フォームのページを新たに作成します。
4-2. ページ内にフォームを配置する
新規フォームのページが作成できたら、ページ内にフォームを配置します。
4-3. フォームを設定する
「＋フォームの新規作成」を選択し、
作成したテーブルとフォームを選択します。
「データ」タブで、「新しいレコードを作成します」になっていることを確認します（新規入力モードであることを意味します）。
「送信時」タブで、データを登録した際にホームのページに遷移するよう設定します。
このあたりは、モデル駆動型アプリにはない設定ですね。
「CAPTCHA」タブのチェックは今回は外しておきます。
CAPTCHAとは、ロボットによる入力を防ぐ際に利用される、読みづらい文字を入力させるようなアレです。Power Pagesでは標準搭載されています。
「OK」をクリックして設定を終えると、以下のような画面になります。
4-4. 確認してみる
ここまで出来たら、画面右上のプレビューから、フォーム画面ができているか確認してみましょう。
問題なければ、以下のようなページが表示されると思います。
（左側と右側の高さが不一致になってしまったのは見なかったことにしてくださいm( )m）
実際にデータを登録し、登録後にホームのページに遷移することを確認してみましょう。
ちなみに、テーブルのアクセス権はリスト作成時に付与していますので、ここでは作業不要です。
5. 編集フォーム画面を作成する
続いて、編集フォーム画面を作ります。
ここは、基本的には4章の手順とほぼ同じなのですが、一部異なる部分のみ解説します。
編集フォーム用のページを追加しフォームを挿入する際は、先ほど新規フォームのページで作成したフォームのパーツが表示されていますが、それは選択せず「＋フォームの新規作成」を選択します。
下部に表示されているフォームのパーツは新規作成フォーム用のパーツなので、編集用に別のフォームのパーツを作る必要があります。
次の画面では、先ほどと同じテーブル、フォームは選択するものの、ここで別の名前を付けます。
お気づきになった方もいらっしゃるかもしれませんが、Pagesに配置しているフォームコンポーネントは、Dataverseのテーブルで作成したフォームに、Pages用の設定項目を付加したものなんですよね。
イメージとしては、Dataverseのテーブルで作成したフォーム（下図左）の他に、それを包含したPower Pages用のフォーム設定（下図中央）が存在し、PagesのページにはそのPower Pages用のフォーム設定を配置する感じです。
ちなみに、私はこのあたりがなかなか理解できず一度心が折れました。
ということで、編集フォーム用のフォームの設定では、「データ」タブで「既存のレコードを更新します」になっていることを確認します。
キャンバスアプリやモデル駆動型アプリとは異なり、新規と編集は分けないといけないんですね。
それ以外の設定は、新規フォームと同じでOKです。
6. 各画面の遷移を設定する
ここまでで3つの画面ができたと思いますので、互いに画面遷移を繋げていきます。
新規フォーム画面、編集フォーム画面からリストの画面に遷移させる設定は既に終わっていますので、ここではリストから新規フォームおよび編集フォームに遷移させる設定のみ行います。
これはリストに対して設定しますので、リストを選択し「リストの編集」を選択します。
「アクション」タブで、「新しいレコードを作成する」をONにし、以下のように設定します。
続いて下の方にある「レコードの編集」をONにし、以下のように設定します。
最後にすぐ下の「レコードの削除」をONにします。
ちなみに、「詳細の表示」は読み取り専用で開かせる時に使うものですが、前述の通りフォームのモードごとにPages用のフォーム設定を作る必要があるため、読み取り専用モードのPages用のフォーム設定が必要となります。
最後に動作を確認
これで最低限の開発は終了しましたので、画面右上のプレビューから、レコードの新規登録、レコードの編集、レコードの削除をやってみましょう。
レコードの編集や削除は、該当のレコードの右側の「∨」をクリックすると選択できます。
意図した動作が実現できましたでしょうか。
ということで、Power Pagesの超基礎編として、1テーブルにおける一覧画面と新規編集画面の作成方法をご紹介しました。
ここまでの手順であれば、基本的にPower Pagesの設計スタジオ画面で開発可能でした。
が、これに親子テーブルのフォーム、フォームのコントロールの変更、動的な列の表示非表示、初期値設定などが必要になると、設計スタジオ画面だけでは制御できない部分が出てきます。
このあたりがPower Pagesの難しいところかなと思いますので、また機会があればアウトプットしてみようと思います。
（本当はこの記事で親子テーブルくらいまでは紹介しようと思ったのですが、既に7000文字くらいまで来てしまったので断念。。）
Power Pagesよく分からなくて手が付けられていなかった、という方々の背中を1ミリでも押せていれば何よりです。
欲しいアプリは欲しい人が作る時代へ。
何かのご参考になれば幸いです。
