Power Apps ポータル 入力フォームを複数ページに分けたい場合は詳細フォーム(Web Form)が便利！

2021.06.09

Power Apps ポータルページで入力フォームを作成する際、入力項目が多いと複数ページにフォームを分割したいときがある。

そんなときは詳細フォーム（Web Form）が便利だったので、その使い方をメモ。

スポンサーリンク

詳細フォーム（Web Form）

ポータルには、ユーザーに情報を入力させるフォームが、

  • 基本フォーム（Entity Form）
  • 詳細フォーム（Web Form）

の2種類があって、基本フォームはテーブル（エンティティ）のフォーム1つを（ほぼ）そのまま表示して入力させるのに対し、詳細フォームは複数のステップに分けて情報を入力させることができる。

※詳細フォームのイメージはこのページがわかりやすいかなと。
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/web-form-steps

実際に詳細フォームを作ってみる

言葉で説明しても正直わかりにくいので、早速詳細フォームを作ってみる！

事前準備

今回使用するテーブルがこちら

で、このテーブルに対してこんなフォームを作成してあげる。

1つ目のタブが「問い合わせ者」の情報
2つ目のタブが「問い合わせ内容」情報

これで準備完了！

基本フォームで表示してみる

まずはこのフォームを基本フォームで表示してみる。

ポータルの編集から、「新しいページ」→「空白」を追加
ページに適当に名前を付けたら、「＋」ボタンから「フォーム」を選択。
そしたら、こんな感じで新しい基本フォームを作ってあげる。

  • 名前：わかりやすい名前
  • テーブル：さっき作った「お問い合わせ」テーブル
  • フォームレイアウト：さっき作った「PortalForm」フォーム
  • モード：「挿入（新規作成）」

アクセス許可（データへのアクセス権限）は今回設定せず、ロボットチェック（画像文字の表示）も不要。

するとこんな感じで基本フォームが表示されて、項目を入力して「送信」を押すと、
Dataverseにデータが追加される。

詳細フォームの作成

で、今回の本題の詳細フォームでこのお問い合わせを表示してみる。

イメージは、

  • ページ1：「問い合わせ者」タブの質問
  • ページ2：「問い合わせ内容」タブの質問

をする感じ。

ページ1：「問い合わせ者」タブの質問

まずは「アプリ」一覧から「ポータル管理」を探してクリック。
するとポータル管理アプリが開くので、「詳細フォーム」から「新規」を選択。
「新しい詳細フォーム」で、名前を適当につけて、Webサイトに自分が作成しているサイトを選択して、「ステップの開始」から「フォームステップの新規作成」を選択する。
「保存して続行」！
そしたら「新しいフォームステップ」で、以下を設定。

  • 名前：適当に
  • 詳細フォーム：さっき作った詳細フォーム（お問い合わせ詳細フォーム）
  • 種類：（今回は）タブの読み込み
  • ターゲットテーブル：お問い合わせ（テーブル）

そしたら、「Form Definition」タブへ移動して、

  • モード：挿入
  • フォーム名：事前準備で作ったやつ（PortalForm）
  • タブ名：問い合わせ者

を設定し、「保存して閉じる」を押す。

そうすると「詳細フォーム」の編集画面に戻るので、「ステップの開始」に今作ったフォームステップ（お問い合わせ者入力ステップ）を設定して、上書き保存。

これで、1つ目の画面（お問い合わせ者情報入力）が完成！

ページ2：「問い合わせ内容」タブの質問

続いて2つ目の画面（お問い合わせ内容入力）の作成。

さっき作成した「詳細フォーム」の「詳細フォームステップ」タブを選択し、「詳細フォームステップの作成」をクリック。
ページ1と同じようにこれらを設定して、
Form Definitionタブに移動し、今度は

  • モード：編集（ページ1で新規作成したレコードを編集するイメージ）
  • フォーム名、タブ名：事前準備で作成したやつ
  • Source Type：前のステップからの結果
  • エンティティソースのステップ：お問い合わせ者入力ステップ

と設定し、「保存して閉じる」。
これで、ステップ1で作成した「お問い合わせ者情報」だけが入ったレコードの、「お問い合わせ内容」を編集できるようになる。

これでページ2も完成！

ページ1とページ2をつなげる

詳細フォームの「詳細フォームステップ」タブから、ページ1のステップを選択し、
「次のステップ」にさっき作成したページ2のステップを設定すると、2つのステップがつながる！

これで詳細フォームの作成が完了！

ポータルページに詳細フォームを追加する

まずは、基本フォームのときと同様に「新しいページ」を作成。

詳細フォームは「＋」ボタンのところでは表示されないようなので、詳細フォームを追加したい列（Column）を選択して、右下の「＜／＞」ボタンを押す。
するとコードエディターが表示されるので、詳細フォームを出したいところに下のliquidを書いてあげて保存！

{% webform name: '詳細フォームの名前' %}

これで詳細フォームの追加が完了！

テスト

ポータルへアクセスし、詳細フォームを追加したページに移動。

そうするとこんな感じでステップ1が表示される！
入力して「次へ」を押すと、ページ2の質問が表示される！
ページ2も入力して「送信」を押すと、成功メッセージが表示されて、
Dataverseにデータが入る！

最後に

入力項目がたくさんあって1画面に収めるのがしんどいときはこの詳細フォームがとても便利そう。

今回は単純なページ遷移だけを取り扱ったけれど、ページ遷移の分岐とかも実装できるようなので、さらに調べることができたら記事にします！

おまけ1：進捗率（インジケーター）の表示

詳細フォームのオプションで、「進行状況のインジケーター」を設定してあげると、
入力画面に進捗率が表示されて、ちょっとおしゃれに！　※もちろんこの進捗率バーの色もCSSとかで変更可能！

おまけ2：同じフォーム内のタブをステップで分けたいだけなら

ちなみに、同じフォーム内のタブをステップとして分けたいだけであれば、

ステップを作る際に「種類」を「フォームの読み込み」にしてあげて、
「タブからステップを自動生成」にチェックを入れてあげると、
これだけで勝手にタブを別ステップとして詳細フォームを表示してくれる！

この「タブからステップを自動生成」する方法と、自分でステップを定義する方法だと、Dataverseのレコードのでき方が違って、

  • 自分で定義 → 最初のステップで「次へ」を押したタイミングでレコードが作られる（後ステップは編集）
  • 自動生成 → 最後のタブで「送信」（場合によっては「次へ」）を押したタイミングでレコードが作られる

という感じ。

この違いによって、1:Nリレーションのあるテーブルのレコード追加を詳細フォームに組み込めたり、途中で入力をやめた際のゴミデータをどうするか？みたいな話が出たり、と色々あるけれど、これもまた長くなりそうなので別記事で。

コメント

タイトルとURLをコピーしました