Integração do Form Bridge com o portal personalizado para formulários HTML5

O FormBridge é uma API de ponte de formulários HTML5 que permite interagir com um formulário. Para obter a referência da API FormBridge, consulte Referência da API FormBridge.

Você pode usar a API FormBridge para obter ou definir os valores dos campos de formulário na página HTML e enviar o formulário. Por exemplo, você pode usar a API para criar uma experiência semelhante a um assistente.

Um aplicativo HTML existente pode aproveitar a API FormBridge para interagir com um formulário e incorporá-lo à página HTML. É possível usar as seguintes etapas para definir o valor de um campo usando a API Form Bridge.

Integração de formulários HTML5 a uma página da Web

  1. Escolha um Perfil ou crie um Perfil

    1. Na interface CRX DE, navegue até: https://'[server]:[port]'/crx/de.

    2. Faça logon com as credenciais de administrador.

    3. Crie um perfil ou escolha um perfil existente.

      Para obter detalhes sobre como criar um perfil, consulte Criar um novo Perfil.

  2. Modificar o Perfil HTML

    Inclua tempo de execução XFA, biblioteca de localidades XFA e trecho HTML de formulário XFA no renderizador de perfis, crie sua página da Web e insira o formulário na página da Web.

    Por exemplo, use o seguinte trecho de código para criar um aplicativo com dois campos de entrada e um formulário para demonstrar a interação entre o formulário e um aplicativo externo.

    <%@ 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>
    
    OBSERVAÇÃO

    A linha 9 contém uma referência JSP adicional para estilos CSS e arquivos JavaScript para criar a página.

    A tag <div id="rightdiv"> em linha 18 contém o trecho HTML do formulário XFA.
    A página tem o estilo de dois container: left e right. O container direito tem o formulário. O container esquerdo tem dois campos de entrada e parte da página HTML externa.
    A seguinte captura de tela mostra como o formulário é exibido em um navegador.

    portal

    O lado esquerdo faz parte da página HTML. O lado direito que contém os campos é o xfa form.

  3. Acessar os campos de formulário na página

    A seguir está um script de amostra que pode ser adicionado para definir valores em um campo de formulário.

    Por exemplo, se você quiser definir NomeFuncionário usando os valores em Campos Nome e Sobrenome, chame a função window.formBridge.setFieldValue.

    Da mesma forma, você pode ler o valor chamando a API window.formBridge.getFieldValue.

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

Nesta 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