Integrazione di Form Bridge con portale personalizzato per HTML5 Forms integrating-form-bridge-with-custom-portal-for-html-forms
FormBridge è un’API bridge di HTML5 forms che consente di interagire con un modulo. Per il riferimento all'API FormBridge, vedere Riferimento all'API FormBridge.
È possibile utilizzare l’API FormBridge per ottenere o impostare i valori dei campi modulo dalla pagina HTML e inviare il modulo. Ad esempio, puoi utilizzare l’API per creare un’esperienza simile a una procedura guidata.
Un’applicazione HTML esistente può utilizzare l’API FormBridge per interagire con un modulo e incorporarlo nella pagina HTML. Puoi utilizzare la procedura seguente per impostare il valore di un campo utilizzando l’API Bridge di Form.
Integrazione di moduli HTML5 in una pagina web integrating-html-forms-to-a-web-page
-
Scegli un profilo o creane uno
-
Nell'interfaccia di CRX DE, passare 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, vedere Creazione di un profilo.
-
-
Modifica il profilo HTML
Include il runtime XFA, la libreria locale XFA e lo snippet di HTML del modulo XFA nel modulo di rendering dei profili, progetta la pagina web e inserisce 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 dimostrare 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 riga 9 contiene un riferimento JSP aggiuntivo per gli stili CSS e i file JavaScript per progettare la pagina. Il tag <div id="rightdiv"> della riga 18 contiene lo snippet HTML del modulo XFA. Lo stile della pagina è in due contenitori: left e right. Il contenitore corretto contiene il modulo. Il contenitore sinistro dispone di due campi di input e fa parte della pagina HTML esterna. Nella schermata seguente viene illustrato come il modulo viene visualizzato in un browser. 
Il lato sinistro fa parte della pagina HTML. Il lato destro contenente i campi è il modulo xfa.
-
Accesso ai campi modulo dalla pagina
Di seguito è riportato uno script di esempio che è possibile aggiungere per impostare i valori in un campo modulo.
Ad esempio, se desideri impostare NomeDipendente utilizzando i valori dei campi Nome e Cognome, chiama la funzione window.formBridge.setFieldValue.
Analogamente, è possibile leggere il valore chiamando l'API window.formBridge.getFieldValue.
code language-javascript $(function() { $(".input").blur(function() { window.formBridge.setFieldValue( 'xfa.form.form1.#subform[0].EmployeeName', $("#lname").val()+' '+$("#fname").val() ) }); });