Power Apps Portals で詳細フォームを作成する

こんにちは。日本マイクロソフトの向井です。

今回はPower Apps Portals で詳細フォームを作成し、公開する流れをご紹介します。

#0.1. 詳細フォームとは
まず、詳細フォームの位置づけについて説明します。
Power Apps Portals には基本フォームと詳細フォームの2種類のフォームがあります。
基本フォームはノーコーディングで作成、Webページへの埋め込みができる点が魅力ですが、**単一テーブルにしかデータを入力できない**という制限があります。

そのため、**複数のテーブルにまたがってデータを入力させたい場合**は詳細フォームを使用する必要があります。
また、
・ 複数のページにまたがるフォームを作成したいとき
・ 条件分岐を作成したいとき（作成シナリオを参照）
・ 入力途中でページを一度離れた場合に入力内容（セッション）を保持したいとき
も詳細フォームを使用します。


#0.2. 作成シナリオ
今回は、ポータルに設置されたフォームにユーザーが以下のようにデータを入力していくシナリオを想定します。

![20211223_080224649_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/864d569e-9312-bc9a-61f2-838053dd982c.png)

① すべてのユーザーはフォームAにデータを入力する。
② フォームA内に、はい/いいえで回答する質問が含まれる。
③ ユーザーがはいを選択した場合はフォームBを表示し、ユーザーに入力させる。
④ いいえが選択された場合はフォームBは表示せずに終了。

#0.3 作成手順
大まかな作成手順は以下の通りです。

1. 詳細フォームの作成
2. 詳細フォームステップの作成
3. テーブルアクセス許可の作成
4. Webロールにテーブルアクセス許可を付与
5. ポータルに詳細フォームを埋め込む

こちらの記事では1. ,2. の手順について説明します。
手順3. 以降の手順については後日別記事として公開予定です。（公開次第こちらの記事にリンクを貼ります。）

#0.4. 前提条件
・詳細フォームを埋め込みたいPower Apps Portalsで作成したWebサイトがある。
・Dataverseに以下が用意されている。
　・ フォームAに入力されたデータを格納するテーブルA
　　・ フォームAで入力させたいデータを格納する列
　　・ 条件分岐に使用する、はい/いいえの回答を格納する列　
　・フォームBに入力されたデータを格納するテーブルB

#1. 詳細フォームの作成
##1.1. フォームの用意
Dataverse でテーブルAを開き、フォームを作成します。
今回は元からあるフォームを編集していきます。フォームの種類がMainになっているものを選択します。
※画像ではテーブルA＝問合せ情報です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/f6e0d073-b008-28fd-ee6f-1026cc929bcd.png)

ユーザーに入力させたいフィールド（列）を並べてフォームを作成します。
条件分岐用の質問も忘れずに追加してください。

下の画像の右側のようにプロパティのコンポーネントで切り替えを選択すると、
画像左側のフォームに表示されているオンオフを選べるUIを使用することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/0d0c0d98-4b81-0ef3-4fb0-52595430c050.png)

フォームを作成後、保存＞公開をします。

##1.2. 詳細フォームの作成
ポータル管理アプリ（ポータル作成時に自動生成されるモデル駆動型アプリ）を開きます。
詳細フォームを新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/7107d13a-f700-5021-9511-23d908d879bf.png)

下の画像のハイライトをした項目を埋めていきます。

名前：任意の名前
Webサイト：詳細フォームを埋め込みたいWebサイト
認証が必要：はいの場合、サインインしたユーザーのみが回答できます

読み込み時に新しいセッションを開始する：はいにすると、ユーザーがフォームの入力途中でページを一度離れた後に入力を再開する場合に、以前に入力されたデータを保持します。（詳細フォームの特徴の最終項目で紹介した機能）

ユーザーごとに複数のレコードを許可する：はいにすると、同一ユーザーが複数回フォームを送信できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/30055ab7-d68c-c4a7-3fb4-519740303556.png)

進行状況のインジケーターに関しては[こちらのDocs](https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/web-form-properties#progress-indicator-settings)を参考にしてください。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/6bd258d1-1120-204b-9dce-aec8c55f19ba.png)

入力後、上書き保存します。
 
#2. 詳細フォームステップの作成
今回は以下の３ステップを作成します。
　① フォームAの入力
　② 条件分岐
　③ フォームBの入力
実際のステップは①から始まりますが、作成順としては最後のステップである③から作成すると効率が良いです。（ステップ作成時に次のステップを選択するため、選択対象のステップを先に作成したほうが良い）

##2.1. ③「フォームBの入力」ステップの作成
詳細フォームステップタブから詳細フォームステップを新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/298dcc3a-1a48-1995-87c6-8aeb9ab70ab8.png)

以下のように項目を埋めていきます。

名前：任意の名前
詳細フォーム：1.2で作成した詳細フォーム
種類：フォームの読み込み
ターゲットテーブル名：テーブルB

以前の許可の移動：はいの場合、入力中に前のステップに戻ることを許可します。（日本語訳が変でわかりにくいです・・・）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/3c8f5d56-3f15-3188-72d6-94ec0c789926.png)


入力後、隣のForm Definitionタブに移動し、項目を埋めていきます。

モード：編集
フォーム名：任意の名前
タブ名：1.1で作成したフォームのタブ名
Source Type：現在のポータルユーザー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/abe37409-2650-7d87-a47d-f6598c856e26.png)

入力後、保存して閉じるをクリックします。

#2.2. ②「条件分岐」ステップの作成
同様の手順で、次は条件分岐のステップを作成します。

種類：条件
ターゲットテーブル名：テーブルA
次のステップ：先ほど作成した③のステップ
※ここで次のステップを選択するため、後ろのステップから作成しています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/b38be81d-d20f-3a90-e9a0-4cd64d16584c.png)

入力後、隣のConditionタブに移ります。
このタブでは分岐条件を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/e3d62380-788f-5b18-6ef4-37fd7e6869cb.png)

ここはDataverseのテーブルAのはい/いいえ列を確認し、
名前=true
と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/db4704a4-6344-c572-38f4-83b01f1e52ca.png)

入力後、保存して閉じるをクリックします。

#2.3. ①「フォームAの入力」ステップの作成
同様の手順で①のステップを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/1d3e915f-a1c7-d5ba-1c71-6aea561c1cfd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/cae5edfd-eeee-3995-bef2-3c408175a642.png)
入力後、保存して閉じるをクリックします。

３つのステップが作成されたことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/f7b0b4e9-60e1-e911-a6a8-8e15282ad688.png)

#2.4. 最初のステップの設定
全般タブに移動して、ステップの開始をステップ①に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/95f590c6-1381-a683-51d5-7333eb8e11de.png)
保存して閉じるをクリックします。


以上で詳細フォームを作成することができました。
手順3. 以降は後日別記事としてupし、こちらにリンクを貼る予定です。