将Form Bridge与HTML5表单的自定义门户集成

FormBridge是一个HTML5 Forms Bridge API，它允许您与表单交互。有关FormBridge API参考，请参阅FormBridge API参考。

您可以使用FormBridge API从HTML页获取或设置表单字段的值并提交表单。例如，您可以使用API构建类似于向导的体验。

现有的HTML应用程序可以利用FormBridge API与表单交互并将其嵌入到HTML页中。您可以使用以下步骤使用Form Bridge API设置字段的值。

将HTML5表单集成到网页

选择用户档案或创建用户档案
1. 在CRX DE界面中，导航到：https://[server]:[port]/crx/de。
2. 使用管理员凭据登录。
3. 创建用户档案或选择现有用户档案。
  
  有关如何创建用户档案的详细信息，请参阅创建新用户档案。

修改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样式和JavaScript文件的其他JSP参考。

行18上的<div id="rightdiv">标记包含XFA表单的HTML片段。
页面的样式设置为两个容器:left和right。合适的容器具有表单。左容器有两个输入字段，是外部HTML页的一部分。
以下屏幕快照显示了表单在浏览器中的显示方式。

左侧是HTML页面的一部分。包含字段的右侧是xfa表单。

从页面访问表单字段

以下是一个示例脚本，您可以添加该脚本以在表单字段中设置值。

例如，如果要使用“字段名和姓中的值设置EmployeeName，请调用window.formBridge.setFieldValue函数。

同样，您也可以通过调用window.formBridge.getFieldValue API读取该值。
```
$(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });
```