HTML5 フォームのカスタムプロファイルの作成

プロファイルは、Apache Sling内のリソースノードです。 HTML5フォームレンディションサービスのカスタムバージョンを表します。 HTML5フォームレンディションサービスを使用して、HTML5フォームの外観、動作、操作をカスタマイズできます。 プロファイルノードは、JCRリポジトリの/contentフォルダーに存在します。 ノードは、/contentフォルダーの直下か、/contentフォルダーのサブフォルダーに配置できます。

Profile ノードには xfaforms/profile のデフォルト値を持つ sling:resourceSuperType​プロパティがあります。このノードのレンダリングスクリプトは、/libs/xfaforms/profileにあります。

Sling スクリプトは JSP スクリプトです。JSP スクリプトは要求されたフォームと必要な JS / CSS アーティファクトの HTML を組み立てるためのコンテナとして機能します。これらの Sling スクリプトは​プロファイルレンダラースクリプトとも呼ばれます。 プロファイルレンダラーはForms OSGiサービスを呼び出して、要求されたフォームをレンダリングします。

GETとPOSTの要求では、プロファイルスクリプトはhtml.jspとhtml.profile.jspにあります。 これらのファイルをコピーして変更することで、上書きして独自のカスタマイズを追加できます。インプレースで変更を加えないでください。パッチの更新によってそのような変更が上書きされます。

プロファイルにはさまざまなモジュールが含まれています。これらのモジュールは、formRuntime.jsp、config.jsp、toolbar.jsp、formBody.jsp、nav_footer.jsp、および footer.jsp です。

formRuntime.jsp

formRuntime.jspモジュールには、クライアントライブラリの参照が含まれます。 これは、リクエストからロケール情報を抽出したし、ローカライズしたメッセージをリクエストに含めるなどのための方法も示します。独自のカスタムJavaScriptライブラリまたはスタイルをformRuntime.jspに含めることができます。

config.jsp

config.jsp モジュールには、ロギング、プロキシサービス、動作バージョンなど、さまあまな設定が含まれています。独自の設定およびウィジェットカスタマイズを config.jsp モジュールに追加することができます。また、カスタムウィジェット登録などの設定をconfig.jspモジュールに追加することもできます。

toolbar.jsp

toolbar.jspには、色付きのツールバーを作成するコードが含まれています。 ツールバーを削除するには、toolbar.jsp を HTML.jsp から削除します。

formBody.jsp

formBody.jspモジュールは、XFAフォームのHTML表現用です。

最初に、HTML5 フォームはフォームの最初のページのみをレンダリングします。ユーザーがフォームをスクロールすると、フォームの残りの部分がロードされます。こうすることでロード体験が高速になります。nav_footer.jsp コンポーネントには、すべてのスタイルとスクロール時のページのロードを支援するために必要なエレメントが含まれます。

footer.jsp モジュールは空です。ユーザーの操作にのみ使用するスクリプトを追加できます。

カスタムプロファイルの作成

カスタムプロファイルを作成するには、次の手順を実行します。

プロファイルノードの作成

  1. URLでCRXDEインターフェイスに移動します。https://[server]:[port]/crx/deにログインし、管理者の資格情報を使用してインターフェイスにログインします。

  2. 左のペインで /content/xfaforms/profiles の場所に移動します。

  3. default ノードをコピーし、hrform という名前で別のフォルダー (/content/profiles) にそのノードをペーストします。

  4. 新しいノード、hrform を選択し、hrform/demo の値を持つ文字列プロパティ sling:resourceType を追加します。

  5. ツールバーメニューで「すべて保存」をクリックして、変更を保存します。

プロファイルレンダラースクリプトを作成する

カスタムプロファイルの作成後、このプロファイルにレンダラーの情報を追加します。新しいプロファイルの要求を受け取る際に、CRX はレンダリングする JSP ページの /apps フォルダーの存在を確認します。JSP ページを /apps フォルダーで作成します。

  1. 左側のウィンドウで、/appsフォルダーに移動します。

  2. /appsフォルダーを右クリックし、hrform​という名前のフォルダーを作成します。

  3. hrform​フォルダー内で、demo​という名前のフォルダーを作成します。

  4. 「すべて保存」ボタンをクリックします。

  5. /libs/xfaforms/profile/html.jspに移動し、ノード​html.jsp​をコピーします。

  6. html.jsp​ノードを​html.jsp​という同じ名前で作成した/apps/hrform/demoフォルダーに貼り付け、「保存」をクリックします。

  7. プロファイルスクリプトのその他のコンポーネントを持っている場合は、手順 1 から 6 に従って、/apps/hrform/demo フォルダーにそのコンポーネントをコピーします。

  8. プロファイルが作成されたことを確認するには、URL https://[server]:[port]/content/xfaforms/profiles/hrform.htmlを開きます。

フォームを検証するには、ローカルファイルシステムから AEM Forms にフォームを読み込み、AEM サーバーオーサーインスタンスでフォームをプレビューします。

このページ