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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now