基於資料來源的建議預填及提交最適化表單的工作流程

您可以使用下列任何資料來源搭配使用自動表單轉換服務轉換的最適化表單:

  • 表單資料模型、OData或任何其他第三方服務
  • JSON結構描述
  • XSD架構

根據資料來源,您可以選擇產生具有或不具有資料模型的最適化表單。

本文說明在選取資料來源並使用轉換服務產生最適化表單後,預先填寫欄位值和提交選項的建議工作流程。

資料來源 建議的工作流程

表單資料模型、OData或任何其他第三方服務

選項1:您選擇表單資料模型、OData或任何其他第三方服務作為資料源。使用「自動表單轉換」服務,您可以生成沒有資料綁定的自適應表單。 您可以手動將最適化表單欄位系結為表單資料模型實體,並使用「表單資料模型預填服務」選項來預填欄位值。 您可以使用「使用表單資料模型提交」選項來提交最適化表單。

選項2:您選擇表單資料模型、OData或任何其他第三方服務作為資料源。使用「自動表單轉換」服務,您可以生成沒有資料綁定的自適應表單。 您可使用規則編輯器來系結最適化表單欄位,以預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

有關執行這些工作流的逐步說明,請參見使用資料庫、OData或任何第三方服務作為資料源。

JSON結構描述

您選取JSON結構描述作為資料來源。 根據選取的資料來源:

選項1:您可 以使用「自動表單轉換」服 務產生不含資料系結的最適化表單,並設定JSON結構描述為資料來源。您可以手動將最適化表單欄位系結至JSON結構描述,並且使用任何支援的通訊協定來預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

如需執行工作流程的逐步指示,請參閱使用JSON結構描述作為資料來源。

選項2:您可 以使用「自動表單轉換」服務, 以JSON資料結合產生最適化表單。預填服務和表單提交功能十分順暢。 您不需要任何設定步驟。

如需執行工作流程的逐步指示,請參閱使用JSON結構描述做為資料來源。

XSD架構

您選擇XSD方案作為資料源。 根據選定的資料源,您使用「自動表單轉換」服務生成沒有資料綁定的自適應表單,並將XSD模式配置為資料源。 您可以手動將自適應表單欄位系結至XSD架構,並且使用任何支援的通訊協定來預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

有關執行工作流的逐步說明,請參閱使用XSD架構作為資料源。

如需Automated Forms Conversion服務的詳細資訊,請參閱下列文章:

本文提供的資訊基於以下假設:任何閱讀該資訊的人都具有適應性表單概念的基本知識。

先決條件

  • 設定AEM作者例項
  • 在AEM作者例項](/docs/aem-forms-automated-conversion-service/using/configure-service.html?lang=zh-Hant)上設定[自動化表單轉換服務

自適應表單示例

若要執行使用案例,以最適化表單預填欄位值並將其送出至資料來源,請下載下列範例PDF檔案。

貸款申請表範例

取得檔案

PDF檔案是Automated Forms Conversion服務的輸入。 服務將此檔案轉換為自適應格式。 下圖以PDF格式描述貸款申請範例。

貸款申請表

準備表單型號的資料

AEM Forms Data Integration可讓您設定並連線至不同的資料來源。 使用轉換程式產生最適化表單後,您可以根據表單資料模型、XSD或JSON結構描述來定義表單模型。 您可以使用資料庫、Microsoft Dynamics或任何其他協力廠商服務來建立表單資料模型。

本教程使用MySQL資料庫作為源來建立表單資料模型。 在資料庫中建立​loanapplication​模式,並根據自適應表單中可用的欄位將​applicant​表添加到模式。

示例資料mysql

可以使用以下DDL語句在資料庫中建立​applicant​表。

CREATE TABLE `applicant` (
   `name` varchar(45) DEFAULT NULL,
   `address` varchar(45) DEFAULT NULL,
   `phonenumber` int(11) NOT NULL,
   `email` varchar(45) DEFAULT NULL,
   `occupation` varchar(45) DEFAULT NULL,
   `annualsalary` varchar(45) DEFAULT NULL,
   `familymembers` int(11) DEFAULT NULL,
   PRIMARY KEY (`phonenumber`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8

如果您使用XSD架構作為表單模型來執行使用案例,請使用下列文字建立XSD檔案:

<?xml version="1.0" encoding="utf-8" ?>
    <xs:schema targetNamespace="http://adobe.com/sample.xsd"
                    xmlns="http://adobe.com/sample.xsd"
                    xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="sample" type="SampleType"/>

  <xs:complexType name="SampleType">
    <xs:sequence>
      <xs:element name="name" type="xs:string"/>
   <xs:element name="address" type="xs:string"/>
   <xs:element name="phonenumber" type="xs:int"/>
   <xs:element name="email" type="xs:string"/>
   <xs:element name="occupation" type="xs:string"/>
   <xs:element name="annualsalary" type="xs:string"/>
   <xs:element name="familymembers" type="xs:string"/>
 </xs:sequence>
  </xs:complexType>

  </xs:schema>

或者,將XSD架構下載至本機檔案系統。

貸款申請XSD方案示例

取得檔案

有關在最適化表單中使用XSD架構作為表單模型的詳細資訊,請參見使用XML架構建立最適化表單

如果您使用JSON結構描述作為表單模型來執行使用案例,請建立包含下列文字的JSON檔案:

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "definitions": {
        "loanapplication": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string"
                },
                "address": {
                    "type": "string"
                },
    "phonenumber": {
                    "type": "number"
                },
    "email": {
                    "type": "string"
                },
    "occupation": {
                    "type": "string"
                },
    "annualsalary": {
                    "type": "string"
                },
    "familymembers": {
                    "type": "number"
                }
            }
        }
 },
 "type": "object",
    "properties": {
        "employee": {
            "$ref": "#/definitions/loanapplication"
        }
    }
}

或者,將JSON結構描述下載至本機檔案系統。

貸款申請JSON結構描述範例

取得檔案

如需在最適化表單中使用JSON結構描述作為表單模型的詳細資訊,請參閱使用JSON結構描述建立最適化表單

產生沒有資料系結的最適化表單

使用[Automated Forms Conversion服務將範例貸款申請表格轉換為不含資料系結的最適化表格。 ](/docs/aem-forms-automated-conversion-service/using/convert-existing-forms-to-adaptive-forms.html?lang=zh-Hant)確保選中​Generate adaptive form(s) without data bindings​複選框以生成沒有資料綁定的自適應表單。

無資料綁定的自適應表單

在生成沒有資料綁定的自適應表單後,為自適應表單選擇資料源:

注意

如果您使用「自動表單轉換」服務轉換的最適化表單包含多個名稱相同的欄位,請確定這些欄位會系結至資料來源實體,以避免在提交時可能遺失資料。

使用資料庫、OData或任何第三方服務作為資料源

使用案例:使用Automated Forms Conversion服務生成沒有資料綁定的自適應表單,並將MYSQL資料庫配置為資料源。 您可以手動綁定最適化表單欄位以建立資料模型實體,並使用​Form Data Model Prefill Service​選項來預先填入欄位值。 使用​Submit using Form Data Model​選項提交最適化表單。

執行使用案例前:

根據使用案例,建立​loanapplication​表單資料模型,並將讀取服務參數綁定到​Literal​值。 電話號碼常值必須是在MySQL資料庫的​applicant​模式中配置的記錄之一。 服務使用值作為參數,從資料源中獲取詳細資訊。 您也可以從​Binding To​下拉式清單中選取使用者描述檔屬性或請求屬性

設定表單資料模型

注意

確保在執行使用案例之前,將​get​和​insert​服務添加到表單資料模型、配置和測試服務。

執行下列步驟:

  1. 在​output​資料夾中選擇已轉換的​貸款申請表格,然後點選​Properties

  2. 點選​Form Model​標籤,從​Select From​下拉式清單中選取​Form Data Model,然後點選​Select Form Data Model​以選取​loanapplication​表單資料模型。 點選​Save & Close​以儲存表單。

  3. 選擇​貸款申請表格​示例,然後點選​Edit

  4. 在​Content​標籤中,點選設定圖示:

    設定表單容器

    1. 在​Basic​部分,從​Prefill Service​下拉清單中選擇​Form Data Model Prefill service

    2. 在​Submission​部分,從​Submit Action​下拉清單中選擇​Submit using Form Data Model

    3. 使用​Data Model to submit​欄位選擇資料模型。

    4. 點選done圖示以儲存屬性。

  5. 點選「申請人姓名」文字方塊並選取「設定」圖示](assets/configure_icon.svg)(設定)。![

    1. 在「系結參考」欄位中,選取「申請人 > 名稱」,並點選「完成圖示」以儲存屬性。 同樣,為​地址電話號碼電子郵件職業年薪(美元)​和​否建立資料綁定。 表單為資料模型圖元的從屬族成員​欄位。

    系結參照

  6. 點選​Preview​以檢視預先填入的最適化表單欄位值。

  7. 視需要修改欄位值,並提交最適化表單。 欄位值將提交到MySQL資料庫。 您可以刷新資料庫中的​applicant​表,以查看表中的更新值。

使用案例: 使用Automated Forms Conversion服務生成沒有資料綁定的自適應表單,並將MYSQL資料庫配置為資料源。您可使用規則編輯器來系結最適化表單欄位,以預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

執行以下步驟,使用規則編輯器來調用表單資料模型服務,以在自適應表單中綁定欄位和預填充值:

  1. 在​output​資料夾中選擇​貸款申請表格​範例,然後點選​Edit

  2. 在​Content​標籤中,點選設定圖示:

    設定表單容器

    在​Basic​部分,從​Prefill Service​下拉清單中選擇​Form Data Model Prefill service

  3. 點選​Applicant Name​文字方塊並點選​Edit Rules

    編輯規則以建立資料系結

  4. 在「規則編輯器」頁面上點選​Create

  5. 在​Rule Editor​頁面上:

    1. 選擇「申請人名稱」文本框的狀態。 例如,is initialized,當您在​Preview​模式中呈現表單時,會導致執行​Then​條件。

    2. 在​Then​部分,從​Select Action​下拉清單中選擇​Invoke Service。 您的Forms例項上的所有服務都會顯示在下拉式清單中。

    3. 從列出表單資料模型的部分選擇​Get​服務。 「輸入」欄位顯示​電話號碼,該號碼是為​applicant​資料模型定義的主鍵。 系統會根據此欄位,擷取並預填「輸出」區段中各欄位的最適化表單值。

    4. 使用「輸出」(Output)部分為具有表單資料模型圖元的自適應表單域建立綁定。 例如,將​Applicant Name​最適化表單欄位與​name​實體系結。

    5. 點選​Done。 在「規則編輯器」頁面上再次點選​Done

    用於綁定引用的規則編輯器

  6. 點選​Preview​以檢視預先填入的最適化表單欄位值。

    注意

    確保在與自適應表單關聯的表單資料模型中,get​服務屬性的​Return Array​屬性設定為OFF。

  7. 視需要修改欄位值,並提交最適化表單。 提交的資料位於crx-repository中的以下位置:

    http://host name:port/crx/de/index.jsp#/content/forms/fp/admin/submit/data/latest file available in the folder

使用JSON結構描述做為資料來源

使用案例: 您使用「自動表單轉換」服務產生沒有資料系結的最適化表單,並將JSON結構描述設定為資料來源。您可以手動將最適化表單欄位系結至JSON結構描述,並使用​預覽搭配資料​選項來預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

在執行使用案例之前,請確定您有:

執行下列步驟:

  1. 在​output​資料夾中選擇已轉換的​貸款申請表格,然後點選​Properties

  2. 點選​Form Model​標籤,從​Select From​下拉式清單中選取​Schema,然後點選​Select Schema​以上傳儲存在本機檔案系統上的​demo.schema JSON​架構。 點選​Save & Close​以儲存表單。

  3. 選擇​貸款申請表格​示例,然後點選​Edit

  4. 點選「申請人姓名」文字方塊並選取「設定」圖示](assets/configure_icon.svg)(設定)。![

    在「系結參考」欄位中,選取「申請人 > 名稱」,並點選「完成圖示」以儲存屬性。 同樣,為​地址電話號碼電子郵件職業年薪(美元)​和​否建立資料綁定。 包含JSON結構描述實體的相依族成員​欄位。

  5. 再次選擇​output​資料夾中可用的已轉換​示例貸款申請表,然後選擇​Preview > Preview with Data

    下載範例資料檔案

    取得檔案

  6. 視需要修改欄位值,並提交最適化表單。 提交的資料位於crx-repository中的以下位置:

    http://host name:port/crx/de/index.jsp#/content/forms/fp/admin/submit/data/latest file available in the folder

使用XSD架構作為資料源

使用案例: 您使用「自動表單轉換」服務產生沒有資料系結的最適化表單,並將XSD架構設為資料來源。您可以手動將最適化表單欄位系結至XSD架構,並使用​預覽搭配資料​來預先填入欄位值。 如有必要,請修改欄位值,並將資料送出至crx-repository。

在執行使用案例之前,請確定您有:

執行下列步驟:

  1. 在​output​資料夾中選擇已轉換的​貸款申請表格,然後點選​Properties

  2. 點選​Form Model​標籤,從​Select From​下拉式清單中選取​Schema,然後點選​Select Schema​以上傳儲存在本機檔案系統上的​loanapplication XSD架構。 為XSD架構選擇根元素,然後點選​Save & Close​以儲存表單。

  3. 選擇​貸款申請表格​示例,然後點選​Edit

  4. 點選「申請人姓名」文字方塊並選取「設定」圖示](assets/configure_icon.svg)(設定)。
    在「綁定參考」欄位中,選擇「申請人 > 名稱」,然後按一下「完成表徵圖」保存屬性。 ![同樣,為​地址電話號碼電子郵件職業年薪(美元)​和​否建立資料綁定。 包含XSD架構實體的相依族成員​欄位。

  5. 再次在​output​資料夾中選擇已轉換的​貸款申請表,然後選擇​Preview > Preview with Data

    下載範例資料檔案

    取得檔案

  6. 視需要修改欄位值,並提交最適化表單。 提交的資料位於crx-repository中的以下位置:

    http://host name:port/crx/de/index.jsp#/content/forms/fp/admin/submit/data/latest file available in the folder

使用JSON系結產生最適化表單

使用[Automated Forms Conversion服務,將範例貸款申請表格轉換為具有資料系結的最適化表格。 ](/docs/aem-forms-automated-conversion-service/using/convert-existing-forms-to-adaptive-forms.html?lang=zh-Hant)在生成最適化表單時,請確保不選中​Generate adaptive form(s) without data bindings​複選框。

具JSON系結的最適化表單

使用JSON結構描述做為資料來源

使用案例:您 使用「自動表單轉換」服務,產生具有JSON資料系結的最適化表單。預填服務和表單提交功能十分順暢。 您不需要任何設定步驟。

在執行使用案例之前,請確定您有具有資料系結的最適化表單

執行下列步驟:

  1. 再次選擇​output​資料夾中可用的已轉換​示例貸款申請表,然後選擇​Preview > Preview with Data

    下載範例資料檔案

    取得檔案

  2. 視需要修改欄位值,並提交最適化表單。 提交的資料位於crx-repository中的以下位置:

    http://host name:port/crx/de/index.jsp#/content/forms/fp/admin/submit/data/latest file available in the folder

將提交的最適化表單JSON資料轉換為XML格式

當您在最適化表單欄位中輸入值並送出時,crx-repository中的資料會以JSON格式提供。 您可以使用org.apache.sling.commons.json.xml API或下列范常式式碼,將JSON資料格式轉換為XML:

import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.apache.sling.commons.json.xml.XML;
 
public class ConversionUtils {
 
    public static String jsonToXML(String jsonString) throws JSONException {
        //https://sling.apache.org/apidocs/sling5/org/apache/sling/commons/json/xml/XML.html#toString(java.lang.Object)
        //jar - http://maven.ibiblio.org/maven2/org/apache/sling/org.apache.sling.commons.json/2.0.18/
        //Note: Need to extract boundData part before converting to XML
        return XML.toString(new JSONObject(jsonString));
    }
}

本頁內容