Form Bridge と HTML5 フォームのカスタムポータルの統合
- 適用対象：
- Experience Manager 6.5
作成対象：
- 管理者
- ユーザー
- 開発者
FormBridge は、フォームの操作を可能にする HTML5 forms ブリッジ API です。FormBridge API リファレンスについては、FormBridge API リファレンスを参照してください。
FormBridge API を使用して、HTML ページからフォームフィールドの値を取得または設定し、フォームを送信できます。例えば、API を使用してウィザードのようなエクスペリエンスを作成できます。
既存の HTML アプリケーションは、FormBridge API を使用してフォームを操作し、HTML ページに埋め込むことができます。次の手順で、Form Bridge API を使用してフィールドの値を設定できます。
HTML5 フォームと web ページの統合
-
プロファイルの選択またはプロファイルの作成
-
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>
NOTE9 行目 には、このページをデザインするための、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() ) }); });