Form Bridge と HTML5 フォームのカスタムポータルの統合

FormBridge はフォームとのやりとりを可能にする HTML5 フォームのブリッジ API です。FormBridge API リファレンスについては、FormBridge API リファレンスを参照してください。

FormBridge API を使用して、HTML ページからフォームフィールドの値を取得または設定できます。たとえば、API を使用してウィザードのような経験を築くことができます。

既存の HTML アプリケーションは FormBridge API を利用してフォームとやりとりし、それを HTML ページに埋め込むことができます。次の手順を使用して、Form Bridge API を使用してフィールドの値を設定できます。

HTML5 フォームと Web ページの統合

  1. プロファイルの選択またはプロファイルの作成

    1. CRX DE インターフェイスで、https://'[server]:[port]'/crx/de に移動します。

    2. 管理者の資格情報を使用してログインします。

    3. プロファイルを作成するか、既存のプロファイルを選択します。

      プロファイルの作成方法について詳しくは、新しいプロファイルの作成を参照してください。

  2. 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 フォーム​です。

  3. ページからのフォームフィールドへのアクセス

    次にあるのは、フォームフィールドの値を設定するために追加できるサンプルのスクリプトです。

    たとえば、「名前 (名)」と「名前 (姓)」のフィールドにある値を使用して 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()
                           )
                });
        });

このページ