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

FormBridge是一个HTML5表单桥API，允许您与表单进行交互。 有关FormBridge API引用，请参阅FormBridge API引用。

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

现有的HTML应用程序可以利用FormBridge API与表单进行交互，并将其嵌入到HTML页面中。 您可以使用以下步骤来使用表单桥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()
                           )
                });
        });

在此页面上