コアコンポーネントに基づくアダプティブフォームのカスタム関数の作成

コアコンポーネントに基づくアダプティブFormsは、ユーザー入力に基づいてコンテンツと動作を調整することで、動的なユーザーエクスペリエンスを提供します。 カスタム関数を使用すると、開発者は機能を拡張して、フォームが特定の要件を満たすことができるようにします。 カスタム機能を統合することで、開発者は複雑なロジックを実装し、プロセスを自動化し、特定のビジネス要件やユーザーの期待に沿った独自のインタラクションを導入できます。 これにより、フォームが様々な条件に適合するだけでなく、様々なユースケースに対してより正確で効果的なソリューションを提供できるようになります。
この記事では、コアコンポーネントを使用してアダプティブFormsのカスタム関数を作成する手順を説明します。

考慮事項

カスタム関数を作成するための前提条件

アダプティブFormsへのカスタム関数の追加を開始する前に、次のことを確認してください。

ソフトウェア：

カスタム関数の作成

ルールエディターでカスタム関数を呼び出すクライアントライブラリを作成します。 詳しくは、「クライアント側ライブラリの使用」を参照してください。

カスタム関数を作成する手順は次のとおりです。

クライアントライブラリの作成 create-client-library

クライアントライブラリを追加することで、カスタム関数を追加できます。 クライアントライブラリを作成するには、次の手順を実行します。

リポジトリのクローンを作成

AEM Formsas a Cloud Serviceリポジトリのクローン：

このコマンドは、リポジトリをダウンロードし、複製されたリポジトリのローカルフォルダーをコンピューターに作成します。 このガイド全体では、このフォルダーを [AEMaaCS プロジェクトディレクトリ ] と呼びます。

クライアントライブラリフォルダーの追加

[AEMaaCS プロジェクトディレクトリ ] に新しいクライアントライブラリフォルダーを追加するには、次の手順に従います。

クライアントライブラリフォルダーへのファイルとフォルダーの追加

追加したクライアントライブラリフォルダーに以下を追加します。

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

新しいフォルダーを filter.xml に含める：

新しく作成したクライアントライブラリフォルダーをAEM環境にデプロイします。

AEM as a Cloud Service の [AEMaaCS プロジェクトディレクトリ]を Cloud Service 環境にデプロイします。Cloud Service 環境にデプロイするには：

パイプラインをまだ設定していない場合は、AEM Forms as a Cloud Service のパイプラインの設定方法のガイドを参照してください。

パイプラインが正常に実行されると、クライアントライブラリに追加されたカスタム関数が アダプティブフォームのルールエディターで使用できるようになります。

アダプティブフォームにクライアントライブラリを追加 use-custom-function

クライアントライブラリを Forms CS 環境にデプロイしたら、その機能をアダプティブフォームで使用します。アダプティブフォームでクライアントライブラリを追加するには、次の手順に従います。

カスタム関数は、🔗JavaScript注釈 を使用してアダプティブフォームのルールエディター で使用できます。

アダプティブフォームでのカスタム関数の使用

アダプティブフォームでは、 ルールエディター内のカスタム関数を使用できます。 JavaScriptのファイル（Function.js ファイル）に次のコードを追加して、生年月日（YYYY-MM-DD）に基づいて年齢を計算しましょう。 生年月日を入力として受け取り、年齢を返す calculateAge() というカスタム関数を作成します。

    /**
        * Calculates Age
        * @name calculateAge
        * @param {object} field
        * @return {string}
    */

    function calculateAge(field) {
    var dob = new Date(field);
    var now = new Date();

    var age = now.getFullYear() - dob.getFullYear();
    var monthDiff = now.getMonth() - dob.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
    }

    return age;
    }

上記の例では、ユーザーが生年月日を（YYYY-MM-DD）形式で入力すると、カスタム関数 calculateAge が呼び出され、年齢が返されます。

フォームをプレビューして、ルールエディターを通じてカスタム関数がどのように実装されるかを確認しましょう。

カスタム関数の機能

AEM forms のカスタム関数は、フォームの機能を拡張およびパーソナライズするための堅牢なソリューションを提供します。 カスタム関数を使用すると、組織固有のニーズを満たすことができます。

これらの関数は、特定フィールドの操作、グローバルフィールドの使用、非同期操作、キャッシュメカニズムの組み込みなど、様々な機能をサポートします。 この柔軟性により、フォームを複雑な要件に適応させ、効率的にカスタマイズされたユーザーエクスペリエンスを提供できるようになります。 これらの高度な機能を活用することで、フォームのインタラクションを強化し、パフォーマンスを最適化して、AEM フォームをより機能的でレスポンシブなものにすることができます。

カスタム関数の機能について詳しく見ていきましょう。

カスタム関数での非同期のサポート support-of-async-functions

カスタム関数を使用すると、ルールエディターで非同期関数を実装できます。 この方法のガイダンスについては、記事 アダプティブフォームでの非同期関数の使用を参照してください。

フィールドおよびグローバルスコープのオブジェクトは、カスタム関数でサポートされています。 support-field-and-global-objects

フィールドオブジェクトは、テキストフィールド、チェックボックスなど、フォーム内の個々のコンポーネントまたは要素を参照します。 Globals オブジェクトには、フォームインスタンス、ターゲットフィールドインスタンス、カスタム関数内でフォームの変更を実行するためのメソッドなどの読み取り専用変数が含まれています。

スコープ オブジェクトの詳細については、「 カスタム関数のスコープ オブジェクト」を参照してください。

カスタム関数でのキャッシュサポート

アダプティブフォームは、カスタム関数のキャッシュを実装して、ルールエディターでカスタム関数リストを取得する際の応答時間を短縮します。error.log ファイルに、Fetched following custom functions list from cache というメッセージが表示されます。

カスタム関数を変更すると、キャッシュは無効になり、解析されます。

トラブルシューティング

次の手順

次に、様々な コアコンポーネントに基づくアダプティブフォームのカスタム関数の例を見てみましょう。

関連トピック