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

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

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

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

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

プロファイルの選択またはプロファイルの作成
1. CRX DEインターフェイスで、次の場所に移動します。https://[server]:[port]/crx/de.
2. 管理者の資格情報を使用してログインします。
3. プロファイルを作成するか、既存のプロファイルを選択します。
  
  プロファイルの作成方法について詳しくは、新しいプロファイルの作成を参照してください。
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"/>
        
       <cq:include script="portalheader.jsp"/> 
    </head>
    <body>
        <div id="leftdiv" >
            <div id="leftdivcontentarea">   
                
              <cq:include script="portalbody.jsp"/>  
            </div>
        </div>
        <div id="rightdiv">
            <div id="formBody">
            <cq:include script="config.jsp"/>
            
            <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()
                           )
                });
        });
```

adobe.com 上のリソース

Style System Customer Communications Asset Collections Embedded Charts Digital Rights Management Digital Asset Management

このページ

次を表示：

A virtual event April 27-28.

Expand your skills and get inspired.

プライバシー（更新済み）

利用規約