Intégration d’un objet Form Bridge à un portail personnalisé pour les formulaires HTML5 integrating-form-bridge-with-custom-portal-for-html-forms
FormBridge est une API de « pont logiciel » d’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 tirer parti de 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 integrating-html-forms-to-a-web-page
-
Choix ou création d’un profil
-
Dans l’interface CRX DE, accédez à :
https://[server]:[port]/crx/de. -
Connectez-vous à l’aide des informations d’identification de l’administrateur.
-
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.
-
-
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.
code language-xml <%@ 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>note note NOTE La ligne 9 contient la référence JSP supplémentaire pour permettre aux fichiers CSS et Javascript de concevoir la page. Le <div id="rightdiv"> balise ligne 18 contient le fragment de HTML du formulaire XFA.
La page est organisée 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 suivant : formulaire xfa.
-
Accès aux champs du formulaire à partir de 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 window.formBridge.getFieldValue API.
code language-none $(function() { $(".input").blur(function() { window.formBridge.setFieldValue( 'xfa.form.form1.#subform[0].EmployeeName', $("#lname").val()+' '+$("#fname").val() ) }); });