本教學課程是建立第一個最適化表單系列中的步驟。 Adobe建議依序依序執行系列,以了解、執行和示範完整的教學課程使用案例。
您可以使用規則將互動性、商業邏輯和智慧驗證新增至最適化表單。 適用性表單有內建的規則編輯器。 規則編輯器提供拖放功能,類似於引導式導覽。 拖放方法是建立規則最快速且最簡單的方法。 規則編輯器還為有興趣測試其編碼技能或將規則提升到下一級的用戶提供一個代碼窗口。
您可以前往適用性Forms規則編輯器,深入了解規則編輯器。
在教學課程結束前,您將學習如何建立規則,以:
本教學課程各節結尾的互動式GIF影像可協助您即時學習及驗證您所建立表單的功能。
您遵循create form data model文章建立表單資料模型。 現在,您可以使用規則編輯器叫用Forms資料模型服務,以擷取資訊並新增至資料庫。
每個客戶都獲派一個唯一的客戶ID編號,這有助於識別資料庫中的相關客戶資料。 以下過程使用客戶ID從資料庫中檢索資訊:
開啟最適化表單以進行編輯。
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
點選客戶ID欄位,然後點選編輯規則圖示。 「規則編輯器」窗口隨即開啟。
點選+建立圖示以新增規則。 它會開啟視覺編輯器。
在可視編輯器中,預設會選取WHEN陳述式。 此外,您啟動規則編輯器時所在的表單物件(在此例中為客戶ID)會在WHEN陳述式中指定。
點選「Select State」下拉式清單,然後選取「已變更」。
在THEN語句中,從Select Action下拉清單中選擇Invoke Service。
從Select下拉式清單中選擇Retrieve Shipping Address服務。
將客戶ID欄位從「表單對象」頁簽拖放到放置對象,或在 INPUT 框中選擇此處欄位。
從「表單對象」頁簽拖放「客戶ID」、「名稱」、「發運地址」、「狀態」和「郵遞區號」欄位至「放置對象」或在OUTPUT框中選擇此處欄位。
點選Done以儲存規則。 在規則編輯器視窗中,點選關閉。
預覽最適化表單。 在客戶ID欄位中輸入ID。 表單現在可以從資料庫擷取客戶詳細資訊。
從資料庫中擷取客戶詳細資訊後,您就可以更新運送地址、狀態和郵遞區號。 以下過程調用表單資料模型服務以將客戶資訊更新到資料庫:
選取「Submit」欄位,然後點選「Edit Rules」圖示。 「規則編輯器」窗口隨即開啟。
選取Submit — 按一下規則,然後點選Edit圖示。 編輯提交規則的選項隨即出現。
在WHEN選項中,已選擇Submit和被點擊選項。
在THEN選項中,點選+ Add Statement選項。 從選擇操作下拉清單中選擇調用服務。
從Select下拉式清單中選擇Update Shipping Address服務。
從「表單對象」頁簽拖放「運送地址」、「狀態」和「郵遞區號」欄位至「拖放對象」的相應表名。屬性(例如,customerdetails .shippingAddress),或在INPUT框中選擇此處欄位。所有以tablename為前置詞的欄位(例如,此使用案例中的customerdetails)都用作更新服務的輸入資料。 這些欄位中提供的所有內容都會在資料來源中更新。
請勿拖放Name和Customer ID欄位至對應的tablename.property(例如customerdetails.name)。 有助於避免錯誤更新客戶的名稱和ID。
從「表單對象」頁簽拖放「客戶ID」欄位至INPUT方塊中的id欄位。 不含前置詞tablename的欄位(例如,此使用案例中的customerdetails)可作為更新服務的搜尋參數。 此使用案例中的id欄位可唯一識別customerdetails表中的記錄。
點選Done以儲存規則。 在規則編輯器視窗中,點選關閉。
預覽最適化表單。 檢索客戶的詳細資訊、更新發運地址並提交表單。 當您再次檢索同一客戶的詳細資訊時,將顯示更新的發運地址。
您應對表單執行驗證,以確保在表單中輸入的資料正確,並在資料不正確時顯示錯誤訊息。 例如,如果在表單中輸入了非現有客戶ID,則應會顯示錯誤訊息。
適用性表單提供數個內建驗證的元件,例如電子郵件和數值欄位,可用於常見使用案例。 對於高級使用案例,使用規則編輯器可在資料庫返回零(0)條記錄(無記錄)時顯示錯誤消息。
如果在表單中輸入的客戶ID不在資料庫中,則以下過程將說明如何建立規則以顯示錯誤消息。 規則也會將焦點引至並重設客戶ID欄位。 規則使用表單資料模型服務🔗的dataIntegrationUtils API來檢查資料庫中是否存在客戶ID。
點選客戶ID欄位,然後點選Edit Rules
圖示。 「規則編輯器」窗口隨即開啟。
點選+建立圖示以新增規則。 它會開啟視覺編輯器。
在可視編輯器中,預設會選取WHEN陳述式。 此外,您啟動規則編輯器時所在的表單物件(在此例中為客戶ID)會在WHEN陳述式中指定。
點選「Select State」下拉式清單,然後選取「已變更」。
在THEN語句中,從Select Action下拉清單中選擇Invoke Service。
從可視編輯器切換到代碼編輯器。 開關控制項位於窗口的右側。 「代碼編輯器」隨即開啟,顯示類似下列的代碼:
使用下列程式碼取代輸入變數區段:
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。 出現錯誤訊息。