Integración de Form Bridge con el portal personalizado para formularios HTML5

FormBridge es una API de puente de formularios HTML5 que le permite interactuar con un formulario. Para la referencia de la API de FormBridge, consulte Referencia de la API de FormBridge.

Puede utilizar la API de FormBridge para obtener o establecer los valores de los campos de formulario de la página HTML y enviar el formulario. Por ejemplo, puede utilizar API para crear una experiencia similar a un asistente.

Una aplicación HTML existente puede aprovechar la API de FormBridge para interactuar con un formulario e incrustarlo en la página HTML. Puede seguir los pasos para establecer el valor de un campo mediante la API de Form Bridge.

Integración de formularios HTML5 en una página web

  1. Elegir un perfil o crear un perfil

    1. En la interfaz CRX DE, vaya a: https://[server]:[port]/crx/de.

    2. Inicie sesión con credenciales de administrador.

    3. Cree un perfil o elija un perfil existente.

      Para obtener más información sobre cómo crear un perfil, consulte Creación de un nuevo perfil.

  2. Modificación del perfil HTML

    Incluya tiempo de ejecución de XFA, biblioteca de configuración regional XFA y fragmento de código HTML de formulario XFA en el procesador de perfiles, diseñe la página web y coloque el formulario dentro de la página web.

    Por ejemplo, utilice el siguiente fragmento de código para crear una aplicación con dos campos de entrada y un formulario para demostrar la interacción entre el formulario y una aplicación externa.

    <%@ 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 línea 9 contiene una referencia JSP adicional para estilos CSS y archivos JavaScript para diseñar la página.

    La etiqueta <div id="rightdiv"> de la línea 18 contiene el fragmento HTML del formulario XFA.
    La página tiene un estilo de dos contenedores: izquierda y derecha. El contenedor derecho tiene el formulario. El contenedor izquierdo tiene dos campos de entrada y parte de la página HTML externa.
    La siguiente captura de pantalla muestra cómo se muestra el formulario en un explorador.

    portal

    La parte izquierda forma parte de la página HTML. El lado derecho que contiene los campos es el formulario xfa.

  3. Acceso a los campos del formulario desde la página

    El siguiente es un ejemplo de secuencia de comandos que puede agregar para definir valores en un campo de formulario.

    Por ejemplo, si desea configurar EmployeeName utilizando los valores de Fields First Name y Last Name, llame a la función window.formBridge.setFieldValue.

    Del mismo modo, puede leer el valor llamando a la API window.formBridge.getFieldValue API.

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

En esta página

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