FormBridge è un’API bridge di HTML5 forms che consente di interagire con un modulo. Per informazioni di riferimento sull’API di FormBridge, consulta Riferimento API di 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 i seguenti passaggi per impostare il valore di un campo utilizzando l’API Bridge modulo.
Scegli un profilo o creane uno
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 profilo.
Modificare il profilo di 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.
<%@ 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>
Il riga 9, contiene un riferimento JSP aggiuntivo per gli stili CSS e i file JavaScript per progettare la pagina.
Il <div id="rightdiv"> tag su riga 18 contiene il frammento HTML del modulo XFA.
Lo stile della pagina è suddiviso in due contenitori: left e destra. 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 del 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 utilizzo dei valori nei campi Nome e Cognome, chiama il window.formBridge.setFieldValue funzione.
Allo stesso modo, puoi leggere il valore chiamando window.formBridge.getFieldValue API.
$(function() {
$(".input").blur(function() {
window.formBridge.setFieldValue(
'xfa.form.form1.#subform[0].EmployeeName',
$("#lname").val()+' '+$("#fname").val()
)
});
});