Show Menu
THEMEN×

Integrieren von Form Bridge in das benutzerdefinierte Portal für HTML5-Formulare

FormBridge ist eine Brücken-API für HTML5-Formulare, die es Ihnen ermöglicht, mit einem Formular zu interagieren. For the FormBridge API reference, see FormBridge API reference .
Sie können die FormBridge-API verwenden, um die Werte von Formularfeldern von der HTML-Seite abzurufen oder festzulegen und das Formular zu versenden. Beispielsweise können Sie die API verwenden, um eine assistentenähnliche Erfahrung zu erstellen.
Eine vorhandene HTML-Anwendung kann die FormBridge-API nutzen, um mit einem Formular zu interagieren und es in die HTML-Seite einzubetten. Sie können folgende Schritte verwenden, um den Wert eines Felds mithilfe der Form Bridge-API festzulegen.

Integrieren von HTML5-Formularen in eine Webseite

  1. Wählen oder erstellen Sie ein Profil.
    1. Navigieren Sie in der CRX DE-Schnittstelle zu: https://'[server]:[port]'/crx/de .
    2. Melden Sie sich mit Administratorberechtigungen an.
    3. Erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil aus.
      For details on how to create a profile, see Creating a new Profile .
  2. Ändern Sie das HTML-Profil
    Schließen Sie die XFA-Laufzeitumgebung, die XFA-Gebietsschemabibliothek und das XFA-Form-HTML-Fragment im Profil-Renderer ein, entwerfen Sie Ihre Webseite und platzieren Sie das Formular darauf.
    Verwenden Sie beispielsweise das folgende Codefragment, um eine App mit zwei Eingabefeldern und einem Formular zu erstellen, um die Interaktion zwischen dem Formular und einer externen App zu demonstrieren.
    <%@ 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>
    
    
    The line 9 , contains additional JSP reference for CSS styles and JavaScript files to design the page.
    Das Tag <div id="rightdiv"> in Zeile 18 bezeichnet das HTML-Fragment des XFA-Formulars. Die Seite wird in zwei Container unterteilt: links und rechts . Der rechte Container enthält das Formular. Der linke Container enthält zwei Eingabefelder und einen Teil der externen HTML-Seite. Der folgende Screenshot zeigt, wie das Formular in einem Browser erscheint.
    Die linke Seite ist Teil der HTML-Seite . Die rechte Seite, die die Felder enthält, ist das XFA-Formular .
  3. Zugriff auf die Formularfelder auf der Seite
    Nachstehend finden Sie ein Beispielskript, das Sie hinzufügen können, um Werte in einem Formularfeld festzulegen.
    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()
                               )
                    });
            });