将Form Bridge与HTML5表单的自定义门户集成 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页面中。 您可以使用以下步骤通过Form 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样式和JavaScript文件的其他JSP引用。
    此 <div id="rightdiv"> 标记位于 第18行 包含XFA表单的HTML片段。
    页面将设置为两个容器: 左侧. 正确的容器具有表单。 左侧容器包含两个输入字段和一个外部HTML页的一部分。
    以下屏幕抓图显示了表单在浏览器中的显示方式。

    门户

    左侧是 HTML页面. 包含字段的右侧是 xfa表单.

  3. 从页面访问表单字段

    以下是示例脚本,您可以添加此脚本来设置表单字段中的值。

    例如,如果要设置 雇员姓名 使用字段中的值 名字姓氏,调用 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