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

FormBridge是一个HTML5表单桥接器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样式和JavaScript文件的附加JSP参考。

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

    门户

    左侧是​HTML页面​的一部分。 包含字段的右侧是​xfa形式。

  3. 从页面访问表单字段

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

    例如，如果要使用字段​名字​和​姓氏​中的值设置​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()
                           )
                });
        });

在此页面上