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

  1. Scegli un profilo o creane uno

    1. Nell'interfaccia di CRX DE, passare 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, vedere Creazione di un profilo.

  2. 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.

    portale

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

  3. 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()
                               )
                    });
            });
    
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2