Show Menu
SUJETS×

Intégration d’un objet FormBridge à un portail personnalisé pour les formulaires HTML5

FormBridge est une API de « pont logiciel » d’HTML5 qui vous permet d’interagir avec un formulaire. For the FormBridge API reference, see FormBridge API reference .
Vous pouvez utiliser l’API FormBridge pour obtenir ou définir des valeurs de champs de formulaire à partir de la page HTML et envoyer le formulaire. Par exemple, vous pouvez utiliser l’API pour créer une expérience semblable à un assistant.
Une application HTML existante peut tirer profit de l’API FormBridge pour interagir avec un formulaire et l’intégrer à la page HTML. Vous pouvez utiliser les étapes suivantes pour définir la valeur d’un champ à l’aide de l’API Form Bridge.

Intégration de formulaires HTML5 à une page Web

  1. Choix ou création d’un profil
    1. Dans l’interface CRX DE, accédez à : https://'[server]:[port]'/crx/de .
    2. Connectez-vous à l’aide des informations d’identification de l’administrateur.
    3. Créez un profil ou choisissez un profil existant.
      Pour plus d’informations sur la façon de créer un profil, voir Création d’un nouveau profil .
  2. Modification du profil HTML
    Ajoutez l’exécution de XFA, la bibliothèque XFA locale et l’extrait de formulaire XFA en HTML dans le rendu du profil, concevez votre page Web et placez le formulaire dans la page Web.
    Par exemple, utilisez l’extrait de code suivant, pour créer une application avec deux champs de saisie et un formulaire pour démontrer l’interaction entre le formulaire et une application externe.
    <%@ 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.
    La balise <div id="rightdiv"> à la ligne 18 contient le snippet HTML du formulaire XFA. La page comprend deux conteneurs : gauche et droit . Le conteneur de droite contient le formulaire. Le conteneur de gauche possède deux champs de saisie et une partie de la page HTML externe. La capture d’écran suivante montre comment le formulaire s’affiche dans un navigateur.
    La partie gauche fait partie de la page HTML . La partie droite contenant les champs est le formulaire xfa .
  3. Accès aux champs du formulaire à partir de la page
    Voici un exemple de script que vous pouvez ajouter pour définir les valeurs dans un champ de formulaire.
    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()
                               )
                    });
            });