根據核心元件之最適化Forms的規則編輯器使用者介面

根據核心元件的最適化Forms的規則編輯器使用者介面增強了Adobe Experience Manager (AEM)內的表單建立流程。 它可讓業務使用者和開發人員透過撰寫根據預先定義的條件、使用者輸入和互動來觸發動作的規則,將動態行為和複雜邏輯實作到表單中。 此功能支援現代JavaScript功能,包括ES10功能,並提供直覺式的視覺化編輯器,簡化規則撰寫程式。
規則編輯器有助於簡化表單填寫體驗,確保準確性和效率。 它允許驗證或重設面板和表單,並執行自訂函式以計算表單物件的值。 規則編輯器使用者介面支援巢狀條件並具備叫用表單資料模型服務的功能,是建立回應式、方便使用者且最適化表單的關鍵元件。

瞭解規則編輯器使用者介面 understanding-the-rule-editor-user-interface

規則編輯器提供完整但簡單的使用者介面,用於撰寫和管理規則。 您可以在撰寫模式下,從最適化表單中啟動規則編輯器使用者介面。

若要啟動規則編輯器使用者介面:

  1. 以撰寫模式開啟最適化表單。

  2. 選取您要編寫規則的表單物件,然後在元件工具列中選取 edit-rules 。 規則編輯器使用者介面隨即顯示。

    create-rules

    此檢視中會列出所選表單物件上的任何現有規則。 如需有關管理現有規則的資訊,請參閱管理規則

  3. 選取​ 建立 ​以撰寫新規則。 第一次啟動規則編輯器時,規則編輯器使用者介面的視覺化編輯器預設會開啟。

    規則編輯器UI

讓我們來詳細瞭解規則編輯器UI的每個元件。

A.元件規則顯示 a-component-rule-display

顯示啟動規則編輯器所使用之最適化表單物件的標題,以及目前選取的規則型別。 在上述範例中,規則編輯器是從標題為問題1的最適化表單物件啟動,而選取的規則型別是「何時」。

B.表單物件與函式 b-form-objects-and-functions-br

規則編輯器使用者介面左側的窗格包含兩個標籤 — Forms物件 ​和​ 函式

「表單物件」標籤會顯示最適化表單中包含之所有物件的階層檢視。 它會顯示物件的標題和型別。 撰寫規則時,您可以將表單物件拖放至規則編輯器上。 將物件或函式拖放至預留位置時,在建立或編輯規則時,預留位置會自動採用適當的值型別。

已套用一或多個有效規則的表單物件會以綠色圓點標示。 如果套用至表單物件的任何規則無效,則表單物件會標示為黃點。

函式索引標籤包含一組內建函式,例如Sum Of、Min Of、Max Of、Average Of、Number Of和Validate表單。 您可以使用這些函式計算可重複面板和表格列中的值,並在撰寫規則時在動作和條件陳述式中使用它們。 不過,您也可以建立自訂函式。

某些函式清單如下圖所示:

函式索引標籤

NOTE
您可以在Forms「物件」和「函式」標籤中搜尋物件和函式名稱及標題。

在表單物件的左側樹狀結構中,您可以選取表單物件,以顯示套用到每個物件的規則。 您不僅可以瀏覽各種表單物件的規則,也可以在表單物件之間複製 — 貼上規則。 如需詳細資訊,請參閱複製貼上規則

C.表單物件與功能切換 c-form-objects-and-functions-toggle-br

點選切換按鈕時,會切換表單物件和函式窗格。

D.視覺規則編輯器 visual-rule-editor

視覺化規則編輯器是規則編輯器使用者介面的視覺化編輯器模式中您編寫規則的區域。 它可讓您選取規則型別,並據此定義條件和動作。 在規則中定義條件和動作時,您可以從「表單物件與函式」窗格中拖放表單物件與函式。

如需使用視覺化規則編輯器的詳細資訊,請參閱撰寫規則

E.完成和取消按鈕 done-and-cancel-buttons

Done ​按鈕是用來儲存規則。 您可以儲存不完整的規則。 但是,不完整內容無效,因此不會執行。 當您下次從相同表單物件啟動規則編輯器時,會列出表單物件上已儲存的規則。 您可以在該檢視中管理現有規則。 如需詳細資訊,請參閱管理規則

取消」按鈕會放棄您對規則所做的任何變更並關閉規則編輯器。

寫入規則 write-rules

您可以使用視覺化規則編輯器來撰寫規則

讓我們先來看看如何使用視覺化編輯器來撰寫規則。

+++

使用視覺化編輯器{#using-visual-editor}

讓我們瞭解如何使用下列範例表單在視覺化編輯器中建立規則。

Create-rule-example

範例貸款申請表單中的「貸款需求」區段要求申請人指定其婚姻狀況、薪資,如果已婚,則指定其配偶的薪資。 規則會根據使用者輸入來計算貸款資格金額,並顯示在「貸款資格」欄位中。 套用下列規則以實施情境:

  • 配偶的「薪資」欄位僅在「婚姻狀況」為「已婚」時顯示。
  • 貸款資格金額為薪資總額的50%。

若要撰寫規則,請執行下列步驟:

  1. 首先,根據使用者為「婚姻狀況」選項按鈕選取的選項,撰寫規則以控制「配偶薪資」欄位的可見度。

    以編寫模式開啟貸款申請表單。 選取​ 婚姻狀況 ​元件並選取 編輯 — 規則 。 接著,選取​ 建立 ​以啟動規則編輯器。

    write-rules-visual-editor-1

    啟動規則編輯器時,預設會選取When規則。 此外,您啟動規則編輯器的表單物件(在此例中為「婚姻狀況」)會在When陳述式中指定。

    雖然您無法變更或修改選取的物件,但可以使用規則下拉式清單(如下所示)來選取其他規則型別。 如果您想在其他物件上建立規則,請選取「取消」結束規則編輯器,然後從想要的表單物件再次啟動它。

  2. 選取​ 選取狀態 ​下拉式清單,並選取​ 等於輸入字串 ​欄位就會顯示。

    write-rules-visual-editor-2

  3. 在規則的​ 輸入字串 ​欄位中,從下拉式功能表中選取​ 已婚

    write-rules-visual-editor-4

    您已將條件定義為When Marital Status is equal to Married。 接著,定義若此條件為True時要執行的動作。

  4. 在Then陳述式中,從​ 選取動作 ​下拉式清單中選取​ 顯示

    write-rules-visual-editor-5

  5. 從​ 拖放物件上的[表單物件]索引標籤中拖放 ​​配偶薪資​​ 欄位,或選取這裡 ​欄位。 或者,選取​ 拖放物件或選取這裡 ​欄位,然後從躍現式選單中選取​ 配偶薪資 ​欄位,這會列出表單中的所有表單物件。

    write-rules-visual-editor-6

    接著,定義若此條件為False時要執行的動作。

  6. 按一下​ 新增其他區段,為​ 配偶薪資 ​欄位新增其他條件,以備您選取「婚姻狀況」為單一時使用。

    when-else

  7. 在Else陳述式中,從​ 選取動作 ​下拉式清單中選取​ 隱藏
    when-else

  8. 從​ 拖放物件上的[表單物件]索引標籤中拖放 ​​配偶薪資​​ 欄位,或選取這裡 ​欄位。 或者,選取​ 拖放物件或選取這裡 ​欄位,然後從躍現式選單中選取​ 配偶薪資 ​欄位,這會列出表單中的所有表單物件。
    when-else

    規則在規則編輯器中會顯示如下。

    write-rules-visual-editor-7

  9. 選取​ 完成 ​以儲存規則。

note note
NOTE
或者,您可以在「配偶薪資」欄位上撰寫「顯示」規則,而不是「婚姻狀況」欄位上的「何時」規則,以實施相同的行為。

write-rules-visual-editor-9

  1. 接著,撰寫規則以計算貸款資格金額(為薪資總額的50%),並在「貸款資格」欄位中顯示。 若要取得此結果,請在[貸款資格]欄位上建立​ 設定值

    在撰寫模式中,選取​ 貸款資格 ​欄位,然後選取 編輯規則 。 接著,選取​ 建立 ​以啟動規則編輯器。

  2. 從規則下拉式清單中選取​ 設定值

    write-rules-visual-editor-10

  3. 選取​ 選取選項 ​並選取​ 數學運算式。 用於寫入數學運算式的欄位隨即開啟。

    write-rules-visual-editor-11

  4. 在運算式欄位中:

    • 從Forms物件標籤中選取或拖放第一個​ 放置物件中的 ​​ Salary ​​ 欄位,或選取這裡 ​欄位。

    • 從​ 選取運運算元 ​欄位中選取​ 加號

    • 從「Forms物件」標籤中選取或拖放其他​ 拖放物件的 ​​配偶薪資​​ 欄位,或選取這裡 ​欄位。

    write-rules-visual-editor-12

  5. 接著,在運算式欄位周圍反白的區域中選取,並選取​ 延伸運算式

    write-rules-visual-editor-13

    在延伸運算式欄位中,從​ 選取運運算元 ​欄位中選取​ 除以,並從​ 選取選項 ​欄位中選取​ 數字。 然後在數字欄位中指定​ 2

    write-rules-visual-editor-14

    note note
    NOTE
    您可以在「選取選項」欄位中使用元件、函式、數學運算式和屬性值來建立複雜運算式。

    接著,建立條件,當傳回True時,執行運算式。

  6. 選取​ 新增條件 ​以新增When陳述式。

    write-rules-visual-editor-15

    在When陳述式中:

    • 從Forms物件索引標籤中選取或拖放第一個​ 放置物件的 ​​婚姻狀況​​ 欄位,或選取這裡 ​欄位。

    • 從​ 選取運運算元 ​欄位中選取​ 等於

    • 選取其他​ 拖放物件中的字串,或選取這裡 ​欄位,並在​ 輸入字串 ​欄位中指定​ 已婚

    規則最後會顯示在規則編輯器中,如下所示。 write-rules-visual-editor-16

  7. 選取​ 完成。 這會儲存規則。

  8. 重複步驟7到14,定義另一個規則,以計算婚姻狀況為「單身」時的貸款資格。 規則在規則編輯器中會顯示如下。

    write-rules-visual-editor-17

或者,您可以使用「設定值」規則,在您建立用來顯示 — 隱藏「配偶薪資」欄位的「時機」規則中,計算貸款資格。 當「婚姻狀況」為「單一」時,產生的合併規則會顯示在規則編輯器中,如下所示。

write-rules-visual-editor-18

您可以使用Else條件,撰寫合併規則以控制「配偶薪資」欄位的可見度,並在「婚姻狀況」為「已婚」時計算貸款資格。

write-rules-visual-editor-19

規則編輯器中的自訂函式 custom-functions

除了列在​ 函式輸出 ​下的現成函式(如​ 總和)之外,您也可以在規則編輯器中使用自訂函式。 規則編輯器支援指令碼和自訂函式的JavaScript ECMAScript 2019語法。 如需建立自訂函式的指示,請參閱文章最適化Forms中的自訂函式

管理規則 manage-rules

當您選取物件並選取 edit-rules1 時,表單物件上的任何現有規則都會列出。 您可以檢視標題並預覽規則摘要。 此外,UI可讓您展開並檢視完整的規則摘要、變更規則順序、編輯規則及刪除規則。

清單規則

您可以對規則執行下列動作:

  • 展開/摺疊:規則清單中的「內容」欄會顯示規則內容。 如果在預設檢視中看不到整個規則內容,請選取 expand-rule-content 以展開它。

  • 重新排序:您建立的任何新規則都會棧疊在規則清單底部。 規則會從上到下執行。 頂端的規則會先執行,接著執行相同型別的其他規則。 例如,如果您分別從上方的第一、第二、第三和第四個位置有When、Show、Enable和When規則,則上方的規則會先執行,接著在第四個位置執行When規則。 接著會執行「顯示」和「啟用」規則。
    您可以對規則點選 排序規則 或將其拖放到清單中所需的順序來變更規則的順序。

  • 編輯:若要編輯規則,請選取規則標題旁的核取方塊。 隨即顯示編輯和刪除規則的選項。 選取​ 編輯 ​以在規則編輯器中開啟選取的規則。

  • 刪除:若要刪除規則,請選取該規則並選取​ 刪除

  • 啟用/停用:當您必須暫時暫停使用規則時,您可以選取一或多個規則,並在[動作]工具列中選取[停用] 停用 ​以停用這些規則。 如果規則已停用,則不會在執行階段執行。 若要啟用已停用的規則,您可以選取該規則,然後選取動作工具列中的「啟用」 。 規則的狀態列顯示規則是啟用還是停用。

停用規則

複製貼上規則 copy-paste-rules

您可以將規則從一個欄位複製並貼上到其他類似欄位,以節省時間。

若要複製貼上規則,請執行下列動作:

  1. 選取您要從中複製規則的表單物件,然後在元件工具列中選取 編輯規則 。 規則編輯器使用者介面會出現,並選取表單物件,而現有規則會出現。

    複製規則

    如需有關管理現有規則的資訊,請參閱管理規則

  2. 選取規則標題旁的核取方塊,管理規則的選項就會出現。 選取​ 複製

    copyrule2

  3. 選取您要貼上規則的其他表單物件,並選取​ 貼上。 此外,您可以編輯規則以對其進行變更。

    note note
    NOTE
    只有當表單物件支援所複製規則的事件,您才能將規則貼到另一個表單物件。 例如,按鈕支援點選事件。 您可以將具有點選事件的規則貼到按鈕上,但無法貼到核取方塊上。
  4. 選取​ 完成 ​以儲存規則。

下一步

若要瞭解最適化表單的規則編輯器中的各種運運算元型別和事件,請參閱最適化表單的規則編輯器中的可用運運算元型別和事件文章。

另請參閱

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab