FormBridge ist eine Brücken-API für HTML5-Formulare, die es Ihnen ermöglicht, mit einem Formular zu interagieren. Die FormBridge-API-Referenz finden Sie unter FormBridge-API-Referenz.

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. In der CRX DE-Schnittstelle navigieren Sie zu: http://[Server]:[Anschluss]/crx/de.

    2. Melden Sie sich mit Administratorberechtigungen an.

    3. Erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil aus.

      Weitere Informationen zum Erstellen eines Profils finden Sie unter Erstellen eines neuen Profils.

  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="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>
    

    Hinweis:

    In Zeile 9 befinden sich zusätzliche JSP-Verweise für CSS-Stile und JavaScript-Dateien für das Seitendesign.

    Das Tag <div id="rightdiv"> inZeile 18 bezeichnet das HTML-Fragment des XFA-Formulars.

    Die Seite wird in zwei Container unterteilt: links undrechts. 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.

    Wenn Sie beispielsweise EmployeeName mithilfe der Werte in den Feldern First Name und Last Name festlegen wollen, rufen Sie die Funktionwindow.formBridge.setFieldValue auf. 

    Ebenso können Sie den Wert lesen, indem Sie die API window.formBridge.getFieldValue aufrufen.

     

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie