針對HTML5表單整合Form Bridge與自訂入口網站 integrating-form-bridge-with-custom-portal-for-html-forms

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

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

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

將HTML5表單整合至網頁 integrating-html-forms-to-a-web-page

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

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

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

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

      如需有關如何建立設定檔的詳細資訊,請參閱建立設定檔

  2. 修改HTML設定檔

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

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

    code language-xml
    <%@ 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>
    
    note note
    NOTE
    第9 ​行,包含其他CSS樣式的JSP參考和JavaScript檔案來設計頁面。
    第18 ​行上的<div id="rightdiv">標籤包含XFA表單的HTML片段。
    此頁面已設定為兩個容器的樣式: ​和​ 。 右邊的容器有表單。 左側容器有兩個輸入欄位和部分外部HTML頁面。
    下列熒幕擷圖顯示表單在瀏覽器中的顯示方式。

    入口網站

    左側是​ HTML頁面 ​的一部分。 包含欄位的右側是​ xfa表單

  3. 從頁面 ​存取表單欄位

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

    例如,如果您要使用​ 名字 ​和​ 姓氏 ​欄位中的值設定​ EmployeeName,請呼叫​ window.formBridge.setFieldValue ​函式。

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

    code language-javascript
    $(function() {
                $(".input").blur(function() {
                    window.formBridge.setFieldValue(
                                'xfa.form.form1.#subform[0].EmployeeName',
                                 $("#lname").val()+' '+$("#fname").val()
                               )
                    });
            });
    
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2