アダプティブフォームのコアコンポーネントのカスタマイズ

コアコンポーネントを識別して複製

開発環境を設定する際に、アーキタイプベースのプロジェクトを作成しました。 AEMアーキタイププロジェクトで、カスタマイズする特定のコアコンポーネントを識別します。 識別したら、AEM アーキタイプベースのプロジェクト内にコンポーネントの複製を作成します。 他のアダプティブフォームのコアコンポーネントと並行して保持します。 この手順により、カスタマイズ作業が元のコンポーネントに影響を与えず、自由に実験できるようになります。

コピーしたコンポーネントをカスタマイズ

複製したコンポーネントを開き、要件に従って必要な変更を開始します。

• HTML 構造をカスタマイズ：保守可能でスケーラブルなコードを実現するための BEM（ブロック要素修飾子）スタイルのプラクティスを遵守しながら、デザインのニーズに合わせて HTML 構造を調整します。
• ラベルを更新：コンポーネントのラベルを更新して、カスタマイズしたバージョンに明確でわかりやすい名前を付けます。 一貫性を保つために、提供されている OOTB（標準）ラベルテンプレートを参照してください。
• ウィジェットをカスタマイズ：コンポーネント内で使用するウィジェット（ドロップダウン、チェックボックス）を調整して、特定のユースケースに合わせます。 詳しくは、サンプルウィジェット実装を参照してください。
• ヘルプテキストとツールチップ：コンポーネントに関連付けられたヘルプテキストやツールチップをパーソナライズして、コンテキストやガイダンスをユーザーに提供します。 開始点として OOTB ヘルプテキストテンプレートを使用します。
• データ属性：必要なすべてのデータ属性をコンポーネントの HTML 要素内に組み込みます。 これらの属性は、実行時にコンポーネントを適切に機能させるために重要です。 アダプティブフォームのコアコンポーネントのデータ属性の役割を理解するには、ドキュメントを参照してください。

バックエンドロジックを実装

カスタマイズにバックエンドロジックが必要な場合は、既存の Sling モデルを拡張できます。 提供されている例を参照して、必要な機能をカスタマイズされたコンポーネントにシームレスに統合します。

コンポーネントのダイアログを設定

カスタマイズしたコンポーネントに関連付けられたダイアログを設定します。 ドキュメントで提供されているサンプルコンポーネントダイアログを使用して、ユーザーの操作と設定が適切に管理されていることを確認します。

ローカル開発環境でコンポーネントをデプロイしてテスト

ローカル開発環境で Maven を使用してコンポーネントをビルドおよびデプロイします。 コンポーネントをデプロイしたら、アダプティブフォームを作成してカスタムコンポーネントをテストします。

本番環境でカスタムコンポーネントをデプロイ

ローカル開発環境でコンポーネントをテストしたら、本番環境にコンポーネントをデプロイします。