Integrazione di Form Bridge con il portale personalizzato per i moduli HTML5

FormBridge è un’API di bridge per moduli HTML5 che consente di interagire con un modulo. Per il riferimento API FormBridge, vedere Riferimento API 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 HTML5 in una pagina web

  1. Scegli un profilo o crea un profilo

    1. Nell'interfaccia CRX DE, passa a: https://[server]:[port]/crx/de.

    2. Accedi con le credenziali di amministratore.

    3. Crea un profilo o scegli un profilo esistente.

      Per informazioni dettagliate su come creare un profilo, consulta Creazione di un nuovo profilo.

  2. Modificare il profilo HTML

    Includi runtime XFA, libreria locale XFA e snippet HTML del modulo XFA nel modulo di rendering del profilo, progetta la pagina web e inserisci il modulo nella 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.

    <%@ 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>
    NOTA

    La riga 9 contiene riferimenti JSP aggiuntivi per gli stili CSS e i file JavaScript per la progettazione della pagina.

    Il tag <div id="rightdiv"> sulla riga 18 contiene lo snippet HTML del modulo XFA.
    La pagina è formattata in due contenitori: sinistra e destra. Il contenitore di destra contiene il modulo. Il contenitore sinistro ha due campi di input e parte della pagina HTML esterna.
    La seguente schermata mostra come viene visualizzato il modulo in un browser.

    portale

    Il lato sinistro fa parte della pagina HTML. Il lato destro contenente i campi è il modulo xfa.

  3. 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 utilizzando i valori nei campi Nome e Cognome, chiama la funzione window.formBridge.setFieldValue .

    Allo stesso modo, puoi leggere il valore chiamando l’API window.formBridge.getFieldValue ​ API.

    $(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });

In questa pagina