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
-
Escolher um Perfil ou criar um Perfil
-
Na interface do CRX DE, navegue até:
https://'[server]:[port]'/crx/de. -
Faça logon com credenciais de administrador.
-
Crie um perfil ou escolha um perfil existente.
Para obter detalhes sobre como criar um perfil, consulte Criando um Perfil.
-
-
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. 
O lado esquerdo faz parte da página de HTML. O lado direito que contém os campos é o formulário xfa.
-
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() ) }); });