本教程是建立第一個自適應表單系列中的一個步驟。 Adobe建議依序依時間順序執行系列,以瞭解、執行和展示完整的教學課程使用案例。
您可以使用規則將互動功能、商業邏輯和智慧驗證新增至最適化表單。 最適化表單有內建的規則編輯器。 規則編輯器提供拖放功能,類似於引導導覽。 拖放方法是建立規則最快速最簡單的方法。 規則編輯器也為有興趣測試其編碼技巧或將規則提升到新層次的使用者提供程式碼視窗。
您可在最適化表單規則編輯器中進一步瞭解規則編輯器。
在教學課程結束時,您將學習如何建立規則以:
教學課程各節結尾的互動式GIF影像可協助您即時學習並驗證所建立表格的功能。
您遵循建立表單資料模型文章,建立表單資料模型。 現在,您可以使用規則編輯器來調用Forms Data Model Services以檢索資訊並將資訊添加到資料庫。
每個客戶都會獲得一個唯一的客戶ID號碼,有助於識別資料庫中的相關客戶資料。 以下過程使用客戶ID從資料庫中檢索資訊:
開啟最適化表單以進行編輯。
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
點選「客戶ID」欄位,然後點選「編輯規則]」圖示。[「規則編輯器」(Rule Editor)窗口隨即開啟。
點選+ Create圖示以新增規則。 它會開啟視覺編輯器。
在可視編輯器中,預設情況下選擇WHEN語句。 此外,在WHEN陳述式中,也會指定您啟動規則編輯器時的表單物件(在此例中為客戶ID)。
點選「選擇狀態」下拉式清單,然後選取「變更」。
在THEN語句中,從選擇操作下拉清單中選擇調用服務。
從選擇下拉式清單中選擇檢索發運地址服務。
將「表單物件」標籤中的客戶ID欄位拖放至拖放物件,或在[!UICONTROL INPUT]方塊中選取此處欄位。
將「表單物件」標籤中的「客戶ID、名稱、運送地址、狀態和郵遞區號」欄位拖放至「[!UICONTROL 拖放」物件,或在「[!UICONTROL OUTPUT]」方塊中選取此處的「」欄位。]
點選Done以儲存規則。 在規則編輯器窗口中,按一下Close。
預覽最適化表單。 在客戶ID欄位中輸入ID。 表單現在可以從資料庫擷取客戶詳細資訊。
從資料庫擷取客戶詳細資訊後,您就可以更新送貨地址、州和郵遞區號。 以下過程調用表單資料模型服務,將客戶資訊更新到資料庫:
選擇Submit欄位,然後點選編輯規則圖示。 「規則編輯器」(Rule Editor)窗口隨即開啟。
選擇提交——按一下規則並點選編輯表徵圖。 此時會出現編輯「提交」規則的選項。
在WHEN選項中,已選擇Submit和被按一下選項。
在THEN選項中,點選+ Add Statement選項。 從選擇操作下拉清單中選擇調用服務。
從選擇下拉式清單中選擇更新送貨地址服務。
將「表單物件」標籤中的「運送位址、狀態和郵遞區號」欄位拖放至拖曳物件的對應標籤名稱。property(例如customerdetails .shippingAddress),或在[!UICONTROL INPUT]方塊中選取此處欄位。 所有前置有tablename的欄位(例如,此使用案例中的customerdetails)都是更新服務的輸入資料。 這些欄位中提供的所有內容都會在資料來源中更新。
請勿將Name和Customer ID欄位拖放至對應的tablename.property(例如customerdetails.name)。 它有助於避免錯誤地更新客戶的名稱和ID。
從「表單物件」標籤將客戶ID欄位拖放至INPUT方塊中的id欄位。 沒有前置詞表名的欄位(例如,此使用案例中的客戶詳細資訊)用作更新服務的搜索參數。 此使用案例中的id欄位可唯一識別customerdetails表格中的記錄。
點選Done以儲存規則。 在規則編輯器窗口中,按一下Close。
預覽最適化表單。 擷取客戶的詳細資訊、更新運送地址並提交表單。 當您再次檢索同一客戶的詳細資訊時,將顯示更新的發運地址。
您應對表單執行驗證,以確保在表單中輸入的資料正確無誤,並在資料不正確時顯示錯誤訊息。 例如,如果在表單中輸入了非現有的客戶ID,則應顯示錯誤訊息。
最適化表單提供多個內建驗證的元件,例如電子郵件和數值欄位,您可用於一般使用案例。 使用規則編輯器進行進階使用案例,例如,當資料庫傳回零(0)記錄(無記錄)時,顯示錯誤訊息。
以下過程說明如何建立規則以在表單中輸入的客戶ID不存在於資料庫中時顯示錯誤消息。 此規則也會將焦點引入並重設「客戶ID」欄位。 該規則使用表單data model service的dataIntegrationUtils API來檢查資料庫中是否存在客戶ID。
點選Customer ID欄位,然後點選Edit Rules
圖示。 「規則編輯器」(Rule Editor)窗口隨即開啟。
點選+ Create圖示以新增規則。 它會開啟視覺編輯器。
在可視編輯器中,預設情況下選擇WHEN語句。 此外,在WHEN陳述式中,也會指定您啟動規則編輯器時的表單物件(在此例中為客戶ID)。
點選「選擇狀態」下拉式清單,然後選取「變更」。
在THEN語句中,從選擇操作下拉清單中選擇調用服務。
從可視編輯器切換到代碼編輯器。 開關控制器位於窗口的右側。 程式碼編輯器隨即開啟,顯示類似下列的程式碼:
以下列程式碼取代輸入變數區段:
var inputs = {
"id" : this
};
以下列程式碼取代guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs)區段:
guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
if (result) {
result = JSON.parse(result);
customer_Name.value = result.name;
customer_Shipping_Address = result.shippingAddress;
} else {
if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
customer_Name.value = " ";
guideBridge.setFocus(customer_ID);
}
}
});
預覽最適化表單。 輸入錯誤的客戶ID。 出現錯誤資訊。