針對HTML5表單整合Form Bridge與自訂入口網站

FormBridge是HTML5 Forms Bridge API，可讓您與表單互動。 如需FormBridge API的參考資訊，請參閱 FormBridge API參考.

您可以使用FormBridge API從HTML頁面取得或設定表單欄位的值，並提交表單。 例如，您可以使用API來建置精靈般的體驗。

現有的HTML應用程式可運用FormBridge API與表單互動，並將其內嵌於HTML頁面中。 您可以使用下列步驟，透過Form Bridge API設定欄位的值。

將HTML5表單整合至網頁

  1. 選擇設定檔或建立設定檔

    1. 在CRX DE介面中，導覽至： https://'[server]:[port]'/crx/de.

    2. 使用系統管理員認證登入。

    3. 建立設定檔或選擇現有的設定檔。

      如需如何建立設定檔的詳細資訊，請參閱 建立新的設定檔.

  2. 修改HTML設定檔

    在設定檔轉譯器中包含XFA執行階段、XFA地區設定程式庫和XFA表單HTML片段、設計您的網頁，並將表單放入網頁中。

    例如，使用下列程式碼片段，建立包含兩個輸入欄位的應用程式，並使用表單來示範表單與外部應用程式之間的互動。

    <%@ page session="false"
               contentType="text/html; charset=utf-8"%><%
%><%@ taglib prefix="cq" uri="https://www.day.com/taglibs/cq/1.0" %><%
%><!DOCTYPE html>
<html manifest="${param.offlineSpec}">
    <head>
       <cq:include script="formRuntime.jsp"/>
        <!-- Portal Scripts and Styles -->
       <cq:include script="portalheader.jsp"/>
    </head>
    <body>
        <div id="leftdiv" >
            <div id="leftdivcontentarea">
                <!-- Portal Body -->
              <cq:include script="portalbody.jsp"/>
            </div>
        </div>
        <div id="rightdiv">
            <div id="formBody">
            <cq:include script="config.jsp"/>
            <!-- Form body -->
            <cq:include script="formBody.jsp"/>
            <!  --To assist in page transitions -- add navigation, based on scrolling -->
            <cq:include  script="../nav/scroll/nav_footer.jsp"/>
            <cq:include script="footer.jsp"/>
            </div>
        </div>
    </body>
</html>
    注意

    此 第9行，包含其他CSS樣式的JSP參考資料以及用來設計頁面的JavaScript檔案。

    此 <div id="rightdiv"> 標籤於 第18行 包含XFA表單的HTML片段。

    此頁面已設定為兩個容器的樣式： 左側 和 右. 右邊的容器有表單。 左側容器有兩個輸入欄位和部分外部HTML頁面。

    下列熒幕擷圖顯示表單在瀏覽器中的顯示方式。

    入口網站

    左側是 HTML頁面. 包含欄位的右側是 xfa表單.

  3. 從頁面存取表單欄位

    以下是範例指令碼，您可新增此指令碼以在表單欄位中設定值。

    例如，如果您想要設定 員工姓名 使用欄位中的值 名字 和 姓氏，呼叫 window.formBridge.setFieldValue 函式。

    同樣地，您可以呼叫以讀取值 window.formBridge.getFieldValue API。

    $(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });

本頁內容