Show Menu
トピック×

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

A profile is a resource node in Apache Sling . HTML5フォームレンダリングサービスのカスタムバージョンを表します。 HTML5フォームレンダリングサービスを使用して、HTML5フォームの外観、動作、および操作をカスタマイズできます。 A profile node exists in the /content folder in the JCR repository. You can place the node directly under the /content folder or any subfolder of the /content folder.
Profile ノードには xfaforms/profile のデフォルト値を持つ sling:resourceSuperType ​プロパティがあります。ノードのレンダリングスクリプトは/libs/xfaforms/nodeにあります。プロファイル
Sling スクリプトは JSP スクリプトです。JSP スクリプトは要求されたフォームと必要な JS / CSS アーティファクトの HTML を組み立てるためのコンテナとして機能します。These Sling scripts are also referred as Profile Renderer scripts . プロファイルレンダラーは、要求されたフォームをレンダリングするためにForms OSGiサービスを呼び出します。
プロファイルスクリプトは、GETおよびPOST要求の場合、html.jspとhtml.POST.jspにあります。 これらのファイルをコピーして変更することで、上書きして独自のカスタマイズを追加できます。インプレースで変更を行わないでください。パッチの更新によって、このような変更が上書きされます。
プロファイルにはさまざまなモジュールが含まれています。これらのモジュールは、formRuntime.jsp、config.jsp、toolbar.jsp、formBody.jsp、nav_footer.jsp、および footer.jsp です。

formRuntime.jsp

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

config.jsp

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

toolbar.jsp

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

formBody.jsp

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

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

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

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

  1. Navigate to the CRX DE interface at the URL: https://'[server]:[port]'/crx/de and log in to the interface with administrator credentials.
  2. 左のペインで /content/xfaforms/profiles の場所に移動します。
  3. default ノードをコピーし、 hrform という名前で別のフォルダー ( /content/profiles ) にそのノードをペーストします。
  4. 新しいノード、 hrform を選択し、 hrform/demo の値を持つ文字列プロパティ sling:resourceType を追加します。
  5. ツールバーメニューで「すべて保存」をクリックして、変更を保存します。

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

カスタムプロファイルの作成後、このプロファイルにレンダラーの情報を追加します。新しいプロファイルの要求を受け取る際に、CRX はレンダリングする JSP ページの /apps フォルダーの存在を確認します。JSP ページを /apps フォルダーで作成します。
  1. In the left pane, navigate to the /apps folder.
  2. Right-click on the /apps folder and choose to create a folder with name hrform .
  3. Insider the hrform folder create a folder named demo .
  4. すべて保存 」ボタンをクリックします。
  5. Navigate to /libs/xfaforms/profile/html.jsp and copy the node html.jsp .
  6. Paste html.jsp node into the /apps/hrform/demo folder created above with same name html.jsp and click Save .
  7. プロファイルスクリプトのその他のコンポーネントを持っている場合は、手順 1 から 6 に従って、/apps/hrform/demo フォルダーにそのコンポーネントをコピーします。
  8. To verify that th profile is created, open URL https://'[server]:[port]'/content/xfaforms/profiles/hrform.html
フォームを検証するには、ローカルファイルシステムから AEM Forms に フォームを読み込み 、AEM サーバーオーサーインスタンスで フォームをプレビュー します。