教學課程:將多步驟表單新增至頁面

多步驟表單是透過多個步驟收集使用者輸入的有效方式。 收集到的資訊會在 Microsoft Dataverse 中儲存或更新。 以下是與一般表單相比,多步驟表單中可用的功能:

  • 允許資料收集或更新程序分成多個步驟。
  • 提供根據使用者輸入動態變更步驟流程的條件。
  • 工作階段追蹤可讓使用者接續先前執行資料更新程序時停下的進度,繼續進行。

觀看此影片 (無音訊) 以查看頁面上的多步驟表單範例:

在本教學課程中,您會了解如何:

  • 建立要在多步驟表單中使用的 Dataverse 資料表、檢視表及表單
  • 將多步驟表單新增至網頁
  • 設定多步驟表單的資料表權限
  • 將條件和重新導向步驟新增至多步驟表單

先決條件

注意

建立多步驟表單時,務必先規劃步驟。 這會讓設定程序進行起來更輕鬆。 建立多步驟程序的個別步驟和任何條件分支。

建立多步驟表單

在以下步驟中,我們會建立多步驟表單,此範例採用申請獎學金的簡單程序,但您可以將概念套用至其他商務程序。

以下是範例步驟的概述:

Step 描述:
7 選取要申請的獎學金,並輸入申請人姓名。
2 填入關於申請人的詳細資料。
3 收集一些其他詳細資料。 在稍後的教學課程中,我們會把來自步驟 2 的資訊當做此步驟的條件。
4 收集使用者的最終登出同意。

建立要在多步驟表單中使用的 Dataverse 資料表及表單

下列影片顯示如何建立表單,以在多步驟表單程序中使用。

我們需要將我們的程序資訊儲存在 Microsoft Dataverse 表格中。

對於每個需要使用者在 Dataverse 記錄上建立或更新資料行的程序步驟,您都必須有對應的 Dataverse 表單。

在本範例中,我們會為程序建立名為應用程式的 Dataverse 資料表。 如需有關如何建立 Dataverse 資料表的詳細資訊,請參閱如何使用資料工作區建立和修改 Dataverse 資料表

  1. 移至 Power Pages

  2. 選取您要新增多步驟表單的網站,並選取編輯

  3. 在設計工作室中,選取資料工作區。

  4. 使用下列屬性建立稱為應用程式的 Dataverse 資料表:

    小費

    • 下表只是範例,請隨意建立資料表來配合您自己的商務程序。
    資料行名稱 資料行資料類型
    申請人姓名 文字 (重新命名姓名資料行)
    獎學金 選項 (範例選項:美國建築師獎學金 外國語言獎學金理工科女性獎學金未來設計領導者獎學金)
    年級 選項 (選項:大三大四)
    同意 是/否
    學費 貨幣
    學位類型 選項 (選項:碩士學士)
    全日制 是/否
    主修 文字
    其他獎學金 多行文字

    在資料工作區中建立用於多步驟表單的資料表。

  5. 建立完資料表後,您必須為程序的每個步驟建立表單。

    提示

    • 有關如何建立 Dataverse 表單,請參閱如何使用資料工作區建立和修改 Dataverse 表單
    • 有一個不錯的做法是,命名您的表單以對應多步驟程序的每個步驟。
    • 若要在表單中顯示欄,但不允許使用者更新,請設定這些欄,使其在建立表單時是唯讀的。

    建立下列四個表單,然後排列表單上的欄。 建立每個表單時,選取發佈表單

    表單名稱 表單上的欄
    申請步驟 1 獎學金、申請人姓名
    申請步驟 2 獎學金 (唯讀)、申請人姓名 (唯讀)、學位類型、主修、全日制、年級、理工科
    申請步驟 3 獎學金 (唯讀)、申請人姓名 (唯讀)、學費、其他獎學金
    申請步驟 4 獎學金 (唯讀)、申請人姓名 (唯讀)、同意

    在資料工作區中建立用於多步驟表單的表單。

  6. 您現在應該有一系列要在多步驟程序中使用的表單。

    資料工作區中的表單清單。

將多步驟表單元件新增至頁面

現在有了資料表和表單,我們可以在網頁上建立多步驟表單。

本影片顯示如何在頁面上建立多步驟表單。

  1. 移至頁面工作區,並新增新頁面或編輯現有頁面。 如需有關建立網頁的詳細資訊,請參閱建立和設計頁面

  2. 新增新區段並選取多步驟表單元件。

    如果網站上有其他多步驟表單,您就會看到選項,可以將這些表單新增至您的頁面。 在本範例中,我們會為教學課程建立新的多步驟表單,並從對話方塊選取 + 新的多步驟表單

  3. 您會看到新增多步驟表單視窗。 在表單名稱中輸入應用程式 (或其他名稱)。 選取確定

  4. 表單中將沒有任何步驟。 選取 + 新增第一個步驟以新增第一個步驟。

    新增至網頁的空白多步驟表單。

  5. 新增步驟視窗中,為設定輸入下列值:

    • 步驟名稱欄位中,輸入應用程式步驟 1
    • 選擇資料表欄位中,選取應用程式 (或任何您為資料表指定的名稱)。
    • 在選取表單欄位中,選取應用程式步驟 1
  6. 選擇其他選項側邊索引標籤,並注意此表單中的資料: 選項會自動設定為 建立新的記錄。 在範例的第一個步驟,我們會在 Dataverse 表格中建立新的記錄。 請注意,我們會在後續步驟中,修改在第一個步驟中建立的記錄,而此選項將會不同。

  7. 選取確定

  8. 我們將開始新增其他步驟。 從功能表選取 + 新增步驟

  9. 新增步驟視窗中,為第二個步驟輸入下列值:

    • 步驟名稱欄位中,輸入應用程式步驟 2
    • 選擇資料表欄位中,應用程式已經選取應用程式資料表 (或任何您為資料表指定的名稱)。
    • 在選取表單欄位中,選取應用程式步驟 2
  10. 選擇其他選項側邊索引標籤,並注意此表單中的資料: 選項會自動設定為 更新現有的記錄。 在我們的範例中,第二個步驟會繼續新增詳細資料至第一個步驟中所建立的 Dataverse 記錄。

    注意

    視您的獨特程序而定,您可能要在程序的不同步驟建立或更新不同的 Dataverse 記錄。

  11. 選取確定

  12. 遵循上述指示繼續將其餘兩個步驟新增為更新步驟: 應用程式步驟 3應用程式步驟 4

    將步驟新增至多步驟表單。

編輯欄位屬性

您可以在設計工作室中修改多步驟表單的一些欄位屬性。 讓我們將某個欄位設定為必要欄位、更新標籤並新增描述。

  1. 在頁面的多步驟表單元件中選取欄位。

  2. 選取編輯欄位

  3. 編輯欄位視窗中,將欄位標籤變更為其他值。 選取將此欄位設定為必要欄位,然後選取顯示描述。 在描述欄位中輸入一些指示。

    編輯欄位屬性。

  4. 選取確定

新增資料表權限

根據預設,網站的訪客無法存取多步驟表單。 在本範例中,我們只想讓已驗證的使用者可以填寫多步驟表單。 您可以使用 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,並選取編輯

  12. 下一個步驟欄位中,將應用程式步驟 3的值變更為檢查學位類型

  13. 選取表單定義索引標籤,並在來源類型欄位中選取上一個步驟的結果,然後在實體來源步驟欄位中選取應用程式步驟 1

  14. 選取儲存並關閉

將重新導向步驟新增至多步驟表單

我們還會在程序結尾新增重新導向步驟,把使用者導回首頁。

  1. 選取 + 新增表單步驟,並填入下列設定:

    • 名稱設定為前往首頁*
    • 類型設定為重新導向
  2. 選取重新導向索引標籤。

  3. 網頁欄位中,選取首頁

  4. 選取儲存並關閉

  5. 現在應該會在步驟清單中看到您的重新導向步驟。 我們必須確保使用者會在完成程序的最後一個步驟後到達重新導向步驟。 選取應用程式步驟 4,並選取編輯

  6. 下一個步驟欄位中,選取前往首頁

  7. 選取表單定義索引標籤,並在來源類型欄位中選取上一個步驟的結果,然後在實體來源步驟欄位中選取應用程式步驟 2

    小費

    我們在程序中選擇先前的步驟 (應用程式步驟 2),由於使用者會從第二個步驟或第三個步驟 (視條件而定) 到達此步驟,因此我們希望選擇一個所有使用者都會與之互動的通用步驟。

  8. 選取儲存並關閉

  9. 返回設計工作室,並選取同步按鈕。

  10. 您應該會有一個包含步驟、條件和重新導向的完整多步驟表單。

    已完成的多表單步驟。

  11. 選取預覽,接著按一下桌面

  12. 首頁出現時,選取登入,然後以網站使用者登入

  13. 選取您放置多步驟表單元件的頁面。

  14. 嘗試程序的各種組合,以了解多步驟表單的運作方式。

另請參閱