チュートリアル: マルチステップ フォームをページに追加する

  • [アーティクル]

マルチステップ フォームは、複数のステップにわたってユーザーから入力を収集するための強力な方法です。 収集された情報は、Microsoft Dataverse に保存または更新されます。 通常のフォームと比較して、マルチステップ フォームで使用できる機能は次のとおりです。

  • データの収集または更新のプロセスを複数の手順に分割できます。
  • ユーザー入力に基づいてステップのフローを動的に変更する条件を提供します。
  • セッション追跡を使用すると、ユーザーがデータ更新プロセスを中断した時点から再開することができます。

ページ上のマルチステップ フォームの例については、このビデオ (音声なし) をご覧ください。

このチュートリアルで学習する内容は次のとおりです。

  • マルチステップ フォームで使用する Dataverse テーブル、ビュー、フォームを作成する
  • マルチステップ フォームを Web ページに追加する
  • マルチステップ フォームのテーブル権限を構成する
  • 条件を追加して、ステップをマルチステップ フォームにリダイレクトする

前提条件

Note

マルチステップ フォームを作成するときは、最初に手順を計画することが重要です。 これにより、構成プロセスがより簡単になります。 マルチステップ プロセスへの個々のステップと条件分岐を確立します。

マルチステップ フォームの作成

以下の手順では、マルチステップ フォームを作成します。この例は、奨学金を申請する簡単なプロセスに従っていますが、概念は他のビジネス プロセスにも適用できます。

次に、サンプル ステップのアウトラインを示します。

Step Description
6 申請する奨学金を選択し、申請者名を入力してください。
2 申請者に関する詳細を入力します。
3 いくつかその他の詳細を収集します。 チュートリアルの後半で、ステップ 2 の情報に基づいて、このステップを条件付きにします。
4 ユーザーから最終的なサインアウトの同意を収集します。

マルチステップ フォームで使用する Dataverse テーブルとフォームを作成する

次のビデオは、複数ステップのフォーム プロセスで使用するフォームを作成する方法を示しています。

プロセスの情報を Microsoft Dataverse テーブルに保存する必要があります。

ユーザーが Dataverse レコードの列を作成または更新する必要があるプロセスの各ステップには、対応する Dataverse フォームが必要です。

この例では、プロセス用にアプリケーションという Dataverse テーブルを作成します。 Dataverse テーブルの作成方法についての詳細については、データ ワークスペースを使用して Dataverse テーブルを作成および変更する方法 を参照してください

  1. Power Pages に移動します。

  2. マルチステップ フォームを追加するサイトを選択し、編集 を選択します。

  3. デザイン スタジオで、データ ワークスペースを選択します。

  4. 以下のプロパティで、アプリケーション と呼ばれる Dataverse テーブルを作成します。

    チップ

    • 次の表は一例です。独自のビジネス プロセスに合わせてテーブルを自由に作成してください。
    列名 列のデータ型
    申請者名 テキスト (名前 列の名前を更新する)
    奨学金 選択肢 (選択肢の例: 米国建築家奨学金、外国語奨学金、STEM の女性のための奨学金、未来のデザイン リーダー奨学金)
    クラス レベル 選択肢 (選択肢: ジュニア、 シニア)
    同意 はい/いいえ
    授業料 通貨型
    学位の種類 選択肢 (選択肢: 修士号、学士号 )
    フルタイム はい/いいえ
    メジャー Text
    その他の奨学金 複数行テキスト

    データ ワークスペースのマルチステップ フォームで使用するテーブルを作成します。

  5. テーブルを作成したら、プロセスの各ステップのフォームを作成する必要があります。

    チップ

    次の 4 つのフォームを作成し、フォームに列を配置します。 各フォームが作成されたら、フォームを公開する を選択します。

    Form name フォームの列
    アプリケーション ステップ 1 奨学金、申請者名
    アプリケーション ステップ 2 奨学金 (読み取り専用)、申請者名 (読み取り専用)、学位の種類、専攻、フルタイム、クラス レベル、STEM
    アプリケーション ステップ 3 奨学金 (読み取り専用)、申請者名 (読み取り専用)、授業料、その他の奨学金
    アプリケーション ステップ 4 奨学金 (読み取り専用)、申請者名 (読み取り専用)、同意

    データ ワークスペースのマルチステップ フォームで使用するフォームを作成します。

  6. これで、マルチステップ プロセスで使用する一連のフォームが作成されました。

    データ ワークスペースが含むフォームのリスト。

マルチステップ フォーム コンポーネントをページに追加する

テーブルとフォームができたので、Web ページに複数ステップのフォームを作成できます。

このビデオでは、ページにマルチステップ フォームを作成する方法を示します。

  1. 新しいページを追加するまたは既存のページを編集するには、ページ ワークスペースに移動します。 Web ページ作成に関する詳細情報については、 ページの作成とデザイン を参照してください。

  2. 新しいセクションを追加し、マルチステップ フォーム コンポーネントを選択します。

    サイトに他のマルチステップ フォームが存在する場合は、それらをページに追加するオプションが表示されます。 この例では、チュートリアル用に新しいマルチステップ フォームを作成します。ダイアログから + 新しいマルチステップ フォームを選択します。

  3. マルチステップの追加フォーム ウィンドウが表示されます。 フォーム名 に アプリケーション (または他の名前) を入力します。 OK を選びます。

  4. このフォームにはステップがありません。 最初のステップを追加するために + 最初のステップを追加 を選択します。

    Web ページに追加した空白のマルチステップ フォーム。

  5. ステップの追加 ウィンドウで、構成に次の値を入力します。

    • ステップ名 フィールドで、アプリケーション ステップ 1 を入力します。
    • テーブルの選択 フィールドで、 アプリケーション (またはテーブルに名前を付けたもの) を選択します。
    • [フォームの選択] フィールドで、アプリケーション ステップ 1 を選択します。

  6. 詳細オプション サイドタブを選択して、このフォームのデータ オプションが 新しいレコードを作成する に自動設定されていることを確認します。 最初のステップの例では、Dataverse テーブルに新しいレコードを作成します。 以降のステップでは、最初のステップで作成したレコードを変更するため、このオプションは異なることに注意してください。

  7. OK を選びます。

  8. その他のステップを追加していきます。 メニューから + ステップの追加 を選択します。

  9. ステップの追加 ウィンドウで、二番目のステップに次の値を入力します。

    • ステップ名 フィールドで、アプリケーション ステップ 2 を入力します。
    • テーブルの選択 フィールドで、 アプリケーション テーブル (またはテーブルに名前を付けたもの) が既に選択されている必要があります。
    • [フォームの選択] フィールドで、アプリケーション ステップ 2 を選択します。

  10. 詳細オプション サイドタブを選択して、このフォームのデータ オプションが 既存のレコードを更新する に自動設定されていることを確認します。 2 番目のステップの例では、最初のステップで作成された Dataverse レコードに引き続き詳細を追加します。

    Note

    独自のプロセスに応じて、プロセスのさまざまなステップでさまざまな Dataverse レコードを作成または更新する場合があります。

  11. OKを選択します。

  12. 上記の手順に従って、残りの 2 つのステップ アプリケーション ステップ 3 と アプリケーション ステップ 4 を引き続き追加します。

    マルチステップ フォームにステップを追加します。

フィールドのプロパティを編集する

デザイン スタジオで、マルチステップ フォームのフィールド プロパティの一部を変更できます。 フィールドを必須にして、ラベルを更新し、説明を追加しましょう。

  1. ページ上のマルチステップ フォーム コンポーネントのフィールドを選択します。

  2. フィールドの編集を選択します。

  3. フィールドの編集 ウィンドウで、フィールド ラベル を別の値に変更します。 このフィールドを必須にする を選択し、説明を表示する を選択します。 説明 フィールドに、いくつかの指示を入力します。

    フィールドのプロパティを編集します。

  4. OK を選びます。

テーブルのアクセス許可の追加

既定では、サイトへの訪問者はマルチステップ フォームにアクセスできません。 この例では、認証されたユーザーのみがマルチステップ フォームに入力できるようにします。 Web ロールとテーブル アクセス許可の組み合わせを使用して、独自のマルチステップ プロセスのデータ アクションの作成、読み取り、更新を構成できます。

このビデオは、マルチステップ フォームのテーブルアクセス許可を構成する方法を紹介しています。

新しいフォームの場合、アクセス許可を追加するよう求めるバナーが表示されます。

マルチステップ フォームで使用されるテーブルに対して既に構成済みのアクセス許可がある場合、省略記号 (...) を選択して、アクセス許可 を選びます。

  1. + 新しいアクセス許可 を選択します。

  2. テーブルのアクセス許可は名前を提供し、テーブルが選択され、アクセスの種類は既定でグローバル アクセスに設定されています。 サイト訪問者がフォームを使用できるように、書き込み および 作成 の権限が選択されます。

  3. + 役割の追加 を選択して、認証されたユーザーをデフォルトの役割として選択します。

    アプリケーション テーブルにテーブル アクセス許可を追加します。

  4. 保存 を選びます。

マルチステップ フォームのテスト

この時点で、マルチステップ フォームを試すことができます。

  1. プレビュー を選択し、続いて デスクトップ を選択します。

  2. ホームページが表示されたら、サインイン を選択し、サイト ユーザーでログインします。 詳細については、外部対象ユーザーにアクセスを提供する を参照してください。

  3. マルチステップ フォーム コンポーネントを配置したページを選択します。

  4. ユーザーとしてプロセスを試し、手順を実行します。

  5. 問題が発生した場合は、デザイン スタジオで構成を確認し、各ステップを確認してください。

  6. フォームの送信が完了したら、デザイン スタジオに戻ります。

  7. データ を選択し、アプリケーション テーブル (またはテーブルに名前を付けたもの) を選択し、できることを確認します。複数ステップのフォーム プロセスを使用してレコードが作成されたことを確認します。

マルチステップ フォームに条件付きステップを追加する

マルチステップ フォームに条件付きロジックを追加する必要がある場合は、Dataverse 列の論理名と実行する評価を表示して条件を識別します。 列の論理名は、データ ワークスペース で列構成を表示することで見つけることができます。

以下の例では、申請者が修士号を取得しようとしているかどうかを確認します。 ユーザーが上級学位を取得しようとしている場合は、追加のステップが表示されます。 他の申請者はそのステップをスキップします。 独自のビジネス プロセスに基づいて自由に条件を追加してください。

学位の種類フィールドの値が学士号または修士号かどうかを評価します。これは、フィールドの論理名 craxx_degreetype と選択値 (Master = '124860001') で表されます。

条件付きのステップは、ポータル管理アプリ で構成されます。

  1. デザイン スタジオのマルチステップ フォームで、マルチステップ フォームのすべてのステップを一覧表示するドロップダウンを選択し、ポータル管理アプリ リンクを選択します。

    ポータル管理アプリを起動する。

  2. マルチステップ フォームのメタデータ レコードのポータル管理アプリにいる必要があります。 フォーム ステップ タブを選択します。

  3. + 新しいフォーム ステップ を選択します。

  4. ステップに名前 (例: 学位の種類の確認) を付けます。

  5. 構成を指定します。

    • 種類を条件に設定します。
    • ターゲット テーブル名 ドロップダウン メニューから アプリケーション テーブル フォームを選択します。 タイプが条件のマルチステップ フォーム ステップの構成を設定します。

  6. 条件タブを選択し、論理列名と値を使用して条件を入力します。 この例では、craxx_degreetype == 124860001 に類似したものを使用します (独自の環境からの論理名と値を指定する必要があります)。

    マルチフォーム ステップの条件のテキスト入力フィールド。

  7. 条件を満たさない場合に、ステップを進めるプロセスを設定する必要があります。 アプリケーション ステップ 4 フィールドで、条件が満たされない場合の次のステップ を選択します。

  8. ここで、条件が満たされない場合に特定のステップに進むプロセスを設定する必要があります。 全般タブを選択します。

  9. 次のステップ フィールドで、アプリケーション ステップ 3 を選択します。

  10. 保存して閉じるを選択

  11. ステップのリストに条件付きステップが表示されます。 2 番目のステップを完了した後、ユーザーが条件付きステップに到達することを確認する必要があります。 アプリケーション ステップ 2 を選択し、編集 を選択します。

  12. 次のステップ フィールドで、値を アプリケーション ステップ 3 から 学位の種類を確認する に変更します。

  13. フォーム定義 タブを選択し、ソース タイプ フィールドで 前のステップからの結果 を選択し、エンティティ ソース ステップ フィールドで、アプリケーション ステップ 1 を選択します。

  14. 保存して閉じる を選択します。

マルチステップ フォームにリダイレクト ステップを追加する

また、プロセスの最後にリダイレクト ステップを追加して、ユーザーをホーム ページに戻します。

  1. + 新規フォーム ステップ を選択して次の構成を入力します。

    • 名前 を ホーム - ホーム ページに移動* に設定します
    • 種類 を リダイレクト に設定します

  2. リダイレクト タブを選択します。

  3. または Web ページ フィールドで、ホーム ページを選択します。

  4. 保存して閉じる を選択します。

  5. ステップのリストにリダイレクト ステップが表示されます。 プロセスの前回ののステップを完了した後、ユーザーがリダイレクト ステップに到達することを確認する必要があります。 アプリケーション ステップ 4 を選択し、編集 を選択します。

  6. 次のステップ フィールドで、ホームページに移動 を選択します。

  7. フォーム定義 タブを選択し、ソース タイプ フィールドで 前のステップからの結果 を選択し、エンティティ ソース ステップ フィールドで、アプリケーション ステップ 2 を選択します。

    チップ

    ユーザーは条件に応じて 2 番目のステップまたは 3 番目のステップのいずれかからこのステップに到達するため、プロセスの早い段階 (アプリケーション ステップ2) を選択します。すべてのユーザーが対話する共通のステップを選択したいと考えています。

  8. 保存して閉じる を選択します。

  9. デザイン スタジオ に戻り、 同期 ボタンを選択します。

  10. ステップ、条件、リダイレクトを含む完全なマルチステップ フォームが必要です。

    完了したマルチフォーム ステップ。

  11. プレビュー を選択し、続いて デスクトップ を選択します。

  12. ホームページが表示されたら、サインイン を選択し、サイト ユーザーでログインします。

  13. マルチステップ フォーム コンポーネントを配置したページを選択します。

  14. プロセスのさまざまな組み合わせを試して、マルチステップ フォームがどのように機能するかを確認してください。

関連情報