Integrating Form Bridge with forms portal

Integrating Form Bridge with forms portal

Search
Adobe LiveCycle User Guide
Applies to: Adobe LiveCycle

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

FormBridge is a Mobile Forms bridge API that allows you to interact with a form. For the FormBridge API reference, see FormBridge API reference.

You can use the FormBridge API to get or set the values of form fields from the HTML page and submit the form. For example, you can use API to build a wizard-like experience.

An existing HTML application can leverage the FormBridge API to interact with a form and embed it in the HTML page. You can use following steps to set the value of a field using Form Bridge API.

Integrating Mobile Forms to a web page

  1. Choose a Profile or create a Profile

    1. In the CRX DE interface, navigate to: http://<server>:<port>/lc/crx/de.

    2. Log in with administrator credentials.

    3. Create a profile or choose an existing profile.

      For details on how to create a profile, see Creating a new Profile. 

  2. Modify the HTML Profile

    Include XFA runtime, XFA locale library, and XFAform HTML snippet in the profile renderer, design your web page, and place the form inside the web page.

    For example, use the following code snippet, to create an app with two input fields and a form to demonstrate the interaction between the form and an external app.

    <%@ page session="false"
               contentType="text/html; charset=utf-8"%><%
%><%@ taglib prefix="cq" uri="http://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:

    The line 9, contains additional JSP reference for CSS styles and JavaScript files to design the page.

    The <div id="rightdiv"> tag on line 18 contains the HTML snippet of the XFA form.

    The page is styled into two containers: left and right. The right container has the form. The left container has two input fields and part of the external HTML page.

    The following screen shot shows how the form displays in a browser.

    The left side is part of the HTML page. The right side containing the fields is the xfa form.

  3. Accessing the form fields from the page

    The following is a sample script you can add to set values in a form field.

    For example, if you want to set the EmployeeName using the values in the Fields First Name and Last Name, call the window.formBridge.setFieldValue function. 

    Similarly, you can read the value by calling window.formBridge.getFieldValue API.

     

    $(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });