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

Dernière mise à jour : 2023-11-07

Rubriques :
Mobile Forms
Afficher plus sur ce sujet

Créé pour :
User

FormBridge est une API de passerelle de formulaires HTML5 qui vous permet d’interagir avec un formulaire. Pour plus d’informations sur la référence à l’API FormBridge, reportez-vous à Référence à l’API FormBridge.

Vous pouvez utiliser l’API FormBridge pour obtenir ou définir les valeurs des champs de formulaire à partir de la page de HTML et envoyer le formulaire. Par exemple, vous pouvez utiliser l’API pour créer une expérience de type assistant.

Une application de HTML existante peut utiliser l’API FormBridge pour interagir avec un formulaire et l’incorporer dans la page de 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

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 création d’un profil, voir Création d’un profil.
Modification du profil de HTML

Incluez l’exécution XFA, la bibliothèque XFA locale et le fragment de HTML de formulaire XFA dans le rendu du profil, concevez votre page web et placez le formulaire dans la page web.

Par exemple, utilisez le fragment 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"/>
        
       <cq:include script="portalheader.jsp"/>
    </head>
    <body>
        <div id="leftdiv" >
            <div id="leftdivcontentarea">
                
              <cq:include script="portalbody.jsp"/>
            </div>
        </div>
        <div id="rightdiv">
            <div id="formBody">
            <cq:include script="config.jsp"/>
            
            <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>
```
REMARQUE

La ligne 9 contient la référence JSP supplémentaire pour permettre aux fichiers CSS et Javascript de concevoir la page.

La variable <div id="rightdiv"> balise ligne 18 contient le fragment de HTML du formulaire XFA.

La page est mise en forme en deux conteneurs : left et right. Le conteneur de droite comporte le formulaire . Le conteneur de gauche comporte deux champs de saisie et une partie de la page de HTML externe.

La capture d’écran suivante montre comment le formulaire s’affiche dans un navigateur.

Le côté gauche fait partie de la HTML page. Le côté droit contenant les champs est le formulaire xfa.
Accès aux champs du formulaire depuis la page

Voici un exemple de script que vous pouvez ajouter pour définir des valeurs dans un champ de formulaire.

Par exemple, si vous souhaitez définir la valeur EmployeeName à l’aide des valeurs des champs Prénom et Nom, appelez la fonction window.formBridge.setFieldValue.

De même, vous pouvez lire la valeur en appelant l’API window.formBridge.getFieldValue.
```
$(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });
```