Integrazione di Form Bridge con il portale personalizzato per i moduli HTML5 integrating-form-bridge-with-custom-portal-for-html-forms
FormBridge è un’API bridge di HTML5 forms che consente di interagire con un modulo. Per informazioni di riferimento sulle API di FormBridge, consulta Riferimento API di FormBridge.
È possibile utilizzare l’API FormBridge per ottenere o impostare i valori dei campi del modulo dalla pagina HTML e inviare il modulo. Ad esempio, puoi utilizzare l’API per creare un’esperienza simile alla procedura guidata.
Un’applicazione HTML esistente può utilizzare l’API FormBridge per interagire con un modulo e incorporarlo nella pagina HTML. Per impostare il valore di un campo utilizzando l’API Form Bridge, è possibile effettuare le seguenti operazioni.
Integrazione dei moduli di HTML5 in una pagina web integrating-html-forms-to-a-web-page
-
Scegli un profilo o crea un profilo
-
Nell'interfaccia CRX DE, passa a:
https://[server]:[port]/crx/de. -
Accedi con le credenziali di amministratore.
-
Crea un profilo o scegli un profilo esistente.
Per informazioni dettagliate su come creare un profilo, consulta Creazione di un nuovo profilo.
-
-
Modificare il profilo di HTML
Includere runtime XFA, libreria locale XFA e snippet di moduli XFA HTML nel modulo di rendering del profilo, progettare la pagina web e posizionare il modulo all’interno della pagina web.
Ad esempio, utilizza il seguente frammento di codice per creare un’app con due campi di input e un modulo per illustrare l’interazione tra il modulo e un’app esterna.
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 Linea 9, contiene riferimenti JSP aggiuntivi per gli stili CSS e i file JavaScript per la progettazione della pagina. La <div id="rightdiv"> tag su linea 18 contiene lo snippet HTML del modulo XFA.
La pagina è formattata in due contenitori: sinistra e right. Il contenitore di destra contiene il modulo. Il contenitore sinistro dispone di due campi di input e parte della pagina esterna di HTML.
La seguente schermata mostra come viene visualizzato il modulo in un browser.
Il lato sinistro è parte del Pagina HTML. Il lato destro contenente i campi è il modulo xfa.
-
Accesso ai campi del modulo dalla pagina
Di seguito è riportato uno script di esempio che è possibile aggiungere per impostare valori in un campo modulo.
Ad esempio, se desideri impostare il NomeDipendente utilizzo dei valori nei campi Nome e Cognome, chiama window.formBridge.setFieldValue funzione .
Allo stesso modo, puoi leggere il valore chiamando l’API window.formBridge.getFieldValue API.
code language-none $(function() { $(".input").blur(function() { window.formBridge.setFieldValue( 'xfa.form.form1.#subform[0].EmployeeName', $("#lname").val()+' '+$("#fname").val() ) }); });