Integração do Form Bridge com o portal personalizado para formulários HTML5 integrating-form-bridge-with-custom-portal-for-html-forms

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 usar a API FormBridge para interagir com um formulário e incorporá-lo na página HTML. Você pode usar as seguintes etapas para definir o valor de um campo usando a API do Form Bridge.

Integração de formulários HTML5 a uma página da Web integrating-html-forms-to-a-web-page

  1. Escolher um Perfil ou criar um Perfil

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

    2. Faça logon com credenciais de administrador.

    3. Crie um perfil ou escolha um perfil existente.

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

  2. Modificar o Perfil de HTML

    Inclua o tempo de execução XFA, a biblioteca de localidades XFA e o trecho de HTML do formulário XFA no renderizador de perfil, crie sua página da Web e coloque o formulário dentro da 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.

    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
    A linha 9, contém referências JSP adicionais para estilos CSS e arquivos JavaScript para criar a página.
    A marca <div id="rightdiv"> na linha 18 contém o trecho de HTML do formulário XFA.
    A página tem o estilo de dois contêineres: esquerda e direita. O contêiner direito tem o formulário. O container esquerdo tem dois campos de entrada e parte da página de HTML externa.
    A captura de tela a seguir mostra como o formulário é exibido em um navegador.

    portal

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

  3. Acessando os campos de formulário da página

    Este é um exemplo de script que você pode adicionar para definir valores em um campo de formulário.

    Por exemplo, se você deseja definir o EmployeeName usando os valores nos Campos First Name e Last Name, chame a função window.formBridge.setFieldValue.

    Da mesma forma, você pode ler o valor chamando a 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