Form Bridge と HTML5 フォームのカスタムポータルの統合 integrating-form-bridge-with-custom-portal-for-html-forms

Last update: Fri Apr 05 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
HTML5 Forms

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

FormBridge API を使用して、HTML ページからフォームフィールドの値を取得または設定し、フォームを送信できます。例えば、API を使用してウィザードのようなエクスペリエンスを作成できます。

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

HTML5 フォームと web ページの統合 integrating-html-forms-to-a-web-page

プロファイルの選択またはプロファイルの作成
1. CRX DE インターフェイスで、https://'[server]:[port]'/crx/de に移動します。
2. 管理者の資格情報でログインします。
3. プロファイルを作成するか、既存のプロファイルを選択します。
  
  プロファイルの作成方法について詳しくは、プロファイルの作成を参照してください。

HTML プロファイルを変更

XFA ランタイム、XFA ロケールライブラリ、および XFA フォーム HTML スニペットをプロファイルレンダラーに含め、web ページをデザインし、フォームを web ページ内に配置します。

例えば、次のコードスニペットを使用して、2 つの入力フィールドとフォームを含むアプリを作成し、フォームと外部アプリの間のインタラクションを示します。

code language-xml

code language-xml
<%@ 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>

<%@ 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>

note note
NOTE
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 を呼び出すことで値を読み取れます。

code language-javascript
`$(function() { $(".input").blur(function() { window.formBridge.setFieldValue( 'xfa.form.form1.#subform[0].EmployeeName', $("#lname").val()+' '+$("#fname").val() ) }); });`

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2