FormBridge はフォームとのやりとりを可能にする HTML5 フォームのブリッジ API です。FormBridge API リファレンスについては、FormBridge API リファレンスを参照してください。
FormBridge API を使用して、HTML ページからフォームフィールドの値を取得または設定できます。たとえば、API を使用してウィザードのような経験を築くことができます。
既存の HTML アプリケーションは FormBridge API を利用してフォームとやりとりし、それを HTML ページに埋め込むことができます。次の手順を使用して、Form Bridge API を使用してフィールドの値を設定できます。
プロファイルの選択またはプロファイルの作成
CRX DE インターフェイスで、https://'[server]:[port]'/crx/de
に移動します。
管理者の資格情報を使用してログインします。
プロファイルを作成するか、既存のプロファイルを選択します。
プロファイルの作成方法について詳しくは、新しいプロファイルの作成を参照してください。
HTML プロファイルの変更
XFA ランタイム、XFA ロケールライブラリ、および XFA フォーム HTML スニペットをプロファイルレンダラーに含めた後、Web ページをデザインして、フォームを Web ページ内に配置します。
たとえば、次のコードスニペットを使用して、2 つの入力フィールドとフォームのあるアプリを作成し、フォームと外部アプリの間でのやり取りを示します。
<%@ 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>
9 行目には、このページをデザインするための、CSS スタイルと JavaScript ファイルの追加 JSP 参照が含まれています。
18 行目の <div id="rightdiv"> タグには XFA フォームの HTML スニペットが含まれています。
ページは 2 つのコンテナ、left と right にスタイル設定されています。right コンテナにはフォームがあります。left コンテナには 2 つの入力フィールドと外部 HTML ページの一部があります。
次のスクリーンショットは、フォームがどのようにブラウザーで表示されるかを示しています。
左側は HTML ページの一部です。右側でフィールドを含んでいるのは xfa フォームです。
ページからのフォームフィールドへのアクセス
次にあるのは、フォームフィールドの値を設定するために追加できるサンプルのスクリプトです。
たとえば、「名前 (名)」と「名前 (姓)」のフィールドにある値を使用して EmployeeNameを設定する場合、window.formBridge.setFieldValue 関数を呼び出します。
同様に、window.formBridge.getFieldValue API を呼び出すことで値を読み取れます。
$(function() {
$(".input").blur(function() {
window.formBridge.setFieldValue(
'xfa.form.form1.#subform[0].EmployeeName',
$("#lname").val()+' '+$("#fname").val()
)
});
});