Show Menu
トピック×

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

FormBridge はフォームとのやりとりを可能にする HTML5 フォームのブリッジ API です。For the FormBridge API reference, see FormBridge API reference .
FormBridge API を使用して、HTML ページからフォームフィールドの値を取得または設定できます。たとえば、API を使用してウィザードのような経験を築くことができます。
既存の HTML アプリケーションは FormBridge API を利用してフォームとやりとりし、それを HTML ページに埋め込むことができます。次の手順を使用して、Form Bridge API を使用してフィールドの値を設定できます。

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

  1. プロファイルの選択またはプロファイルの作成
    1. In the CRX DE interface, navigate to: https://'[server]:[port]'/crx/de .
    2. 管理者の資格情報を使用してログインします。
    3. プロファイルを作成するか、既存のプロファイルを選択します。
      For details on how to create a profile, see Creating a new Profile .
  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>
    
    
    The line 9 , contains additional JSP reference for CSS styles and JavaScript files to design the page.
    18 行目 ​の <div id="rightdiv"> タグには XFA フォームの HTML スニペットが含まれています。 ページは 2 つのコンテナ、 left right にスタイル設定されています。right コンテナにはフォームがあります。left コンテナには 2 つの入力フィールドと外部 HTML ページの一部があります。 次のスクリーンショットは、フォームがどのようにブラウザーで表示されるかを示しています。
    左側は HTML ページ ​の一部です。右側でフィールドを含んでいるのは xfa フォーム ​です。
  3. ページからのフォームフィールドへのアクセス
    次にあるのは、フォームフィールドの値を設定するために追加できるサンプルのスクリプトです。
    For example, if you want to set the EmployeeName using the values in the Fields First Name and Last Name , call the window.formBridge.setFieldValue function.
    Similarly, you can read the value by calling window.formBridge.getFieldValue API.
    $(function() {
                $(".input").blur(function() {
                    window.formBridge.setFieldValue(
                                'xfa.form.form1.#subform[0].EmployeeName',
                                 $("#lname").val()+' '+$("#fname").val()
                               )
                    });
            });