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()
)
});
});