アダプティブフォームのコアコンポーネントのカスタム関数
- トピック：
- アダプティブフォーム
- コアコンポーネント
作成対象：
- 管理者
- ユーザー
- 開発者
この記事では、次のような最新機能を備えた最新のアダプティブフォームのコアコンポーネントを使用してカスタム関数を作成する方法について説明します。
- カスタム関数のキャッシュ機能
- カスタム関数のグローバルスコープオブジェクトとフィールドオブジェクトのサポート
- let 関数や arrow 関数などの最新の JavaScript 機能のサポート（ES10 サポート）
カスタム関数の最新機能を使用するには、AEM Forms コアコンポーネント環境で最新のフォームバージョンを設定する必要があります。
はじめに
AEM Forms 6.5 には、ルールエディターを使用して複雑なビジネスルールを定義できる JavaScript 関数が含まれています。AEM Forms には標準の様々なカスタム関数が用意されていますが、多くのユースケースでは、複数のフォームで使用するのに独自のカスタム関数を定義する必要があります。これらのカスタム関数は、特定の要件を満たすことのにエントリ済みデータの操作と処理を有効にすることで、フォームの機能を強化します。また、定義済みの条件に基づいてフォームの動作を動的に変更することもできます。
カスタム関数の使用
アダプティブフォームのコアコンポーネントでカスタム関数を使用すると、次のようなメリットがあります。
- データの管理：カスタム関数は、フォームフィールドに対するエントリ済みデータを管理および処理します。
- データの処理：カスタム関数は、フォームフィールドに対するエントリ済みデータの処理に役立ちます。
- データの検証：カスタム関数を使用すると、フォームの入力に対してカスタムチェックを実行し、指定したエラーメッセージを提供できます。
- 動的な動作：カスタム関数を使用すると、特定の条件に基づいてフォームの動的な動作を制御できます。例えば、フィールドの表示／非表示、フィールド値の変更、フォームロジックの調整を動的に行うことができます。
- 統合：カスタム関数を使用して、外部 API またはサービスと統合できます。外部ソースからのデータの取得、外部 Rest エンドポイントへのデータの送信、外部イベントに基づくカスタムアクションの実行に役立ちます。
カスタム関数は、基本的に JavaScript ファイルに追加されるクライアントライブラリです。カスタム関数を作成すると、ルールエディターで使用でき、アダプティブフォームのユーザーが選択できるようになります。カスタム関数は、ルールエディターの JavaScript 注釈によって識別されます。
カスタム関数でサポートされる JavaScript 注釈
JavaScript 注釈は、JavaScript コードのメタデータを提供します。/** や @ などの特定の記号で始まるコメントが含まれます。注釈は、コード内の関数、変数、その他の要素に関する重要な情報を提供します。アダプティブフォームは、カスタム関数に対して次の JavaScript 注釈をサポートしています。
名前
名前 は、アダプティブフォームのルールエディターでカスタム関数を識別するのに使用されます。カスタム関数に名前を付けるには、次の構文を使用します。
@name [functionName] <Function Name>@function [functionName] <Function Name>@func [functionName] <Function Name>
NOTE[functionName] は関数の名前です。スペースは使用できません。<Function Name> アダプティブフォームのルールエディターでの関数の表示名です。関数名が関数自体の名前と同じ場合は、構文から
[functionName] を省略できます。パラメーター
パラメーター は、カスタム関数で使用される引数のリストです。関数は複数のパラメーターをサポートできます。カスタム関数のパラメーターを定義するには、次の構文を使用します。
-
@param {type} name <Parameter Description> -
@argument{type} name <Parameter Description> -
@arg{type}name <Parameter Description>{type}は、パラメータータイプを表します。許可されているパラメータータイプは、以下のとおりです。- string：単一の文字列値を表します。
- number：単一の数値を表します。
- boolean：単一のブール値（true または false）を表します。
- string[]：文字列値の配列を表します。
- number[]：数値の配列を表します。
- boolean[]：ブール値の配列を表します。
- date：単一の日付値を表します。
- date[]：日付値の配列を表します。
- array：様々なタイプの値を含む汎用の配列を表します。
- object：値を直接渡す代わりに、カスタム関数に渡されるフォームオブジェクトを表します。
- scope：globals オブジェクトを表します。このオブジェクトには、フォームインスタンス、ターゲットフィールドインスタンス、カスタム関数内でフォームの変更を実行するためのメソッドなどの読み取り専用変数が含まれています。これは JavaScript 注釈の最後のパラメーターとして宣言され、アダプティブフォームのルールエディターには表示されません。scope パラメーターは、フォームまたはコンポーネントのオブジェクトにアクセスして、フォームの処理に必要なルールまたはイベントをトリガーします。Globals オブジェクトとその使用方法について詳しくは、こちらをクリックしてください。
パラメータータイプでは 大文字と小文字が区別されず、パラメーター名にスペースは使用できません。
<Parameter Description> には、パラメーターの目的に関する詳細が含まれます。複数の単語を含めることができます。
戻り値のタイプ
戻り値のタイプは、カスタム関数が実行後に返す値のタイプを指定します。カスタム関数の戻り値のタイプを定義するには、次の構文を使用します。
@return {type}@returns {type}{type}は、関数の戻り値のタイプを表します。許可されている戻り値のタイプは、以下のとおりです。- string：単一の文字列値を表します。
- number：単一の数値を表します。
- boolean：単一のブール値（true または false）を表します。
- string[]：文字列値の配列を表します。
- number[]：数値の配列を表します。
- boolean[]：ブール値の配列を表します。
- date：単一の日付値を表します。
- date[]：日付値の配列を表します。
- array：様々なタイプの値を含む汎用の配列を表します。
- object：値を直接表す代わりに、フォームオブジェクトを表します。
戻り値のタイプでは、大文字と小文字は区別されません。
プライベート
プライベートとして宣言されたカスタム関数は、アダプティブフォームのルールエディターのカスタム関数のリストに表示されません。デフォルトでは、カスタム関数はパブリックです。カスタム関数をプライベートとして宣言する構文は @private です。
カスタム関数を作成する際のガイドライン
ルールエディターでカスタム関数をリストするには、次のいずれかの形式を使用できます。
jsdoc コメントを含むまたは含まない関数ステートメント
jsdoc コメントを含むまたは含まないカスタム関数を作成できます。
function functionName(parameters)
{
// code to be executed
}
ユーザーがカスタム関数に JavaScript 注釈を追加しない場合は、ルールエディターに関数名でリストされます。ただし、カスタム関数の読みやすさを向上させるために、JavaScript 注釈を含めることをお勧めします。
必須の JavaScript 注釈またはコメントを含む矢印関数
矢印関数の構文を使用して、カスタム関数を作成できます。
/**
* test function
* @name testFunction
* @param {string} a parameter description
* @param {string=} b parameter description
* @return {string}
*/
testFunction = (a, b) => {
return a + b;
};
/** */
testFunction1=(a) => (return a)
/** */
testFunction2 = a => a + 100;
ユーザーがカスタム関数に JavaScript 注釈を追加しない場合、カスタム関数はアダプティブフォームのルールエディターにリストされません。
必須の JavaScript 注釈またはコメントを含む関数式
アダプティブフォームのルールエディターにカスタム関数をリストするには、次の形式でカスタム関数を作成します。アダプティブフォームのルールエディターでカスタム関数をリストするには、次の形式でカスタム関数を作成します。
/**
* test function
* @name testFunction
* @param {string} input1 parameter description
* @param {string=} input2 parameter description
* @return {string}
*/
testFunction = function(input1,input2)
{
// code to be executed
}
ユーザーがカスタム関数に JavaScript 注釈を追加しない場合、カスタム関数はアダプティブフォームのルールエディターにリストされません。
カスタム関数を作成するための前提条件
アダプティブフォームにカスタム関数を追加する前に、次のソフトウェアがマシンにインストールされていることを確認する必要があります。
-
プレーンテキストエディター（IDE）：どのプレーンテキストエディターでも機能しますが、Microsoft Visual Studio Code などの統合開発環境（IDE）では、編集を簡単にする高度な機能が提供されます。
-
Git：コードの変更を管理するには、このバージョン管理システムが必須です。インストール済みでない場合は、https://git-scm.com からダウンロードしてください。
カスタム関数の作成
カスタム関数を作成する手順は次のとおりです。
AEM プロジェクトアーキタイプを使用してクライアントライブラリを作成
AEM プロジェクトアーキタイプを使用して作成したプロジェクトにクライアントライブラリを追加することで、カスタム関数を追加できます。
既存のプロジェクトがある場合は、ローカルプロジェクトにカスタム関数を直接追加できます。
アーキタイププロジェクトを作成するか、既存のプロジェクトを使用したら、クライアントライブラリを作成します。クライアントライブラリを作成するには、次の手順を実行します。
クライアントライブラリフォルダーの追加
[AEM プロジェクトディレクトリ] に新しいクライアントライブラリフォルダーを追加するには、次の手順に従います。
-
エディターで [AEM プロジェクトディレクトリ] を開きます。
-
ui.appsを見つけます。 -
新しいフォルダーを追加します。例えば、
experience-leagueという名前のフォルダーを追加します。 -
/experience-league/フォルダーに移動し、ClientLibraryFolderを追加します。例えば、customclientlibsという名前のクライアントライブラリフォルダーを作成します。場所：
[AEM project directory]/ui.apps/src/main/content/jcr_root/apps/
クライアントライブラリフォルダーへのファイルとフォルダーの追加
追加したクライアントライブラリフォルダーに以下を追加します。
.content.xmlファイルjs.txtファイルjsフォルダー
Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/
-
.content.xmlで、次のコード行を追加します。<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="[customfunctionscategory]"/>NOTEclient library folderとcategoriesプロパティには任意の名前を選択できます。 -
js.txtで、次のコード行を追加します。#base=js function.js -
jsフォルダーで、カスタム関数を含む JavaScript ファイルをfunction.jsとして追加します。/** * 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; } -
ファイルを保存します。
新しいフォルダーを filter.xml に含める：
-
[AEMaaCS プロジェクトディレクトリ]内の
/ui.apps/src/main/content/META-INF/vault/filter.xmlファイルに移動します。 -
ファイルを開き、最後に次の行を追加します。
<filter root="/apps/experience-league" /> -
ファイルを保存します。
-
ビルドする方法の節の手順に従って、新しく作成したクライアントライブラリフォルダーを AEM 環境にビルドします。
CRXDE を通じてカスタム関数を作成
最新の AEM Forms および Forms アドオンを使用している場合は、CRXDE を通じてカスタム関数を作成し、カスタム関数の最新の更新を使用できます。これを行うには、次の手順を実行します。
-
http://server:port/crx/de/index.jsp#にログインします。 -
/appsフォルダーの下にフォルダーを作成します。例えば、experience-leagueという名前のフォルダーを作成します。 -
変更を保存します。
-
作成したフォルダーに移動し、タイプ
cq:ClientLibraryFolderのノードをclientlibsとして作成します。 -
新しく作成した
clientlibsフォルダーに移動し、allowProxyプロパティとcategoriesプロパティを追加します。
NOTEcustomfunctionsdemoの代わりに任意の名前を指定できます。 -
変更を保存します。
-
clientlibsフォルダーの下にjsというフォルダーを作成します。 -
jsフォルダーの下にfunctions.jsという JavaScript ファイルを作成します。 -
clientlibsフォルダーの下にjs.txtというファイルを作成します。 -
変更を保存します。
作成したフォルダー構造は次のようになります。
-
functions.jsファイルをダブルクリックして、エディターを開きます。ファイルには、カスタム関数のコードが含まれています。
生年月日（YYYY-MM-DD）に基づいて年齢を計算するのに、JavaScript ファイルに次のコードを追加してみましょう。/** * Calculates Age * @name calculateAge * @return {string} */ function calculateAge(dateOfBirthString) { var dob = new Date(dateOfBirthString); 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; } -
function.jsを保存します。 -
js.txtに移動し、次のコードを追加します。#base=js functions.js -
js.txtファイルを保存します。
次のカスタム関数フォルダーを参照できます。このフォルダーをダウンロードして AEM インスタンスにインストールします。
これで、クライアントライブラリを追加することで、アダプティブフォームでカスタム関数を使用できます。
アダプティブフォームでのクライアントライブラリの追加
クライアントライブラリを AEM Forms 環境にデプロイしたら、その機能をアダプティブフォームで使用します。アダプティブフォームでクライアントライブラリを追加するには、次の手順に従います。
-
フォームを編集モードで開きます。フォームを編集モードで開くには、フォームを選択し、「編集」を選択します。
-
コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
-
ガイドコンテナのプロパティアイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
-
「基本」タブをクリックし、ドロップダウンリストから クライアントライブラリカテゴリ の名前を選択します（この場合は、
customfunctionscategoryを選択します）。
-
「完了」をクリックします。
これで、ルールエディターでカスタム関数を使用するルールを作成できます。
次に、AEM Forms 6.5 でルールエディターのサービスの呼び出しを使用して、カスタム関数を設定および使用する方法について説明します。
アダプティブフォームでカスタム関数を使用
アダプティブフォームでは、ルールエディター内でカスタム関数を使用できます。
生年月日（YYYY-MM-DD）に基づいて年齢を計算するために、JavaScript ファイル（Function.js ファイル）に次のコードを追加してみましょう。生年月日を入力として受け取り、年齢を返す 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 が呼び出され、年齢が返されます。
フォームをプレビューして、ルールエディターを通じてカスタム関数がどのように実装されるかを確認しましょう。
NOTEカスタム関数での非同期関数のサポート
非同期カスタム関数は、ルールエディターリストに表示されません。ただし、同期関数式を使用して作成されたカスタム関数内で、非同期関数を呼び出すことができます。
NOTEカスタム関数を使用して非同期関数を呼び出す方法については、以下のコードを参照してください。
async function asyncFunction() {
const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
const data = await response.json();
return data;
}
/**
* callAsyncFunction
* @name callAsyncFunction callAsyncFunction
*/
function callAsyncFunction() {
asyncFunction()
.then(responseData => {
console.log('Response data:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
}
上記の例では、asyncFunction 関数は asynchronous function です。https://petstore.swagger.io/v2/store/inventory に GET リクエストを送信して非同期操作を実行します。await を使用して応答を待機し、response.json() を使用して応答本文を JSON として解析し、データを返します。callAsyncFunction 関数は、asyncFunction 関数を呼び出してコンソールに応答データを表示する同期カスタム関数です。callAsyncFunction 関数は同期関数ですが、非同期の asyncFunction 関数を呼び出し、その結果を then および catch ステートメントで処理します。
動作を確認するために、ボタンを追加し、ボタンのクリック時に非同期関数を呼び出すボタンのルールを作成しましょう。
ユーザーが Fetch ボタンをクリックすると、カスタム関数 callAsyncFunction が呼び出され、次に非同期関数 asyncFunction が呼び出されることを示す次のコンソールウィンドウのイラストを参照してください。コンソールウィンドウを調べて、ボタンをクリックした際の応答を確認します。
カスタム関数の機能について詳しく見ていきましょう。
カスタム関数の様々な機能
カスタム関数を使用して、フォームにパーソナライズされた機能を追加できます。これらの関数は、特定のフィールドの操作、グローバルフィールドの使用、キャッシュなどの様々な機能をサポートします。この柔軟性により、組織の要件に応じてフォームをカスタマイズできます。
カスタム関数のフィールドおよびグローバルスコープオブジェクト
フィールドオブジェクトとは、テキストフィールドやチェックボックスなど、フォーム内の個々のコンポーネントまたは要素を指します。Globals オブジェクトには、フォームインスタンス、ターゲットフィールドインスタンス、カスタム関数内でフォームの変更を実行するためのメソッドなどの読み取り専用変数が含まれています。
NOTEparam {scope} globals は最後のパラメーターにする必要があり、アダプティブフォームのルールエディターには表示されません。様々なユースケースで、どのように Contact Us フォームを使用して、カスタム関数がフィールドオブジェクトとグローバルオブジェクトを使用するかを学びましょう。
ユースケース：SetProperty ルールを使用してパネルを表示
フォームフィールドを Required として設定するには、カスタム関数の作成の節の説明に従って、カスタム関数に次のコードを追加します。
/**
* enablePanel
* @name enablePanel
* @param {object} field1
* @param {object} field2
* @param {scope} globals
*/
function enablePanel(field1,field2, globals)
{
if(globals.functions.validate(field1).length === 0)
{
globals.functions.setProperty(field2, {visible: true});
}
}
[form-path]/jcr:content/guideContainer.model.jsonにある使用可能なプロパティを使用して、フィールドプロパティを設定できます。- Globals オブジェクトの
setPropertyメソッドを使用してフォームに行った変更は、本質的に非同期で、カスタム関数の実行中には反映されません。
この例では、ボタンをクリックすると personaldetails パネルの検証が行われます。パネルでエラーが検出されない場合は、ボタンをクリックすると別のパネルである feedback パネルが表示されます。
personaldetails パネルを検証し、ユーザーが Next ボタンをクリックした際に feedback パネルが表示されるようにする Next ボタンのルールを作成しましょう。
Next ボタンをクリックすると、personaldetails パネルが検証される場所を示す次のイラストを参照してください。personaldetails 内のすべてのフィールドを検証すると、feedback パネルが表示されます。
personaldetails パネルのフィールドにエラーがある場合は、Next ボタンをクリックする際にフィールドレベルでエラーが表示され、feedback パネルは非表示のままになります。
ユースケース：フィールドを検証。
フィールドを検証するには、カスタム関数の作成の節の説明に従って、カスタム関数に次のコードを追加します。
/**
* validateField
* @name validateField
* @param {object} field
* @param {scope} globals
*/
function validateField(field,globals)
{
globals.functions.validate(field);
}
validate() 関数に引数が渡されない場合は、フォームが検証されます。この例では、カスタム検証パターンが contact フィールドに適用されます。ユーザーは、10 で始まり 8 桁の電話番号を入力する必要があります。ユーザーが 10 で始まらない電話番号、または 8 桁以上または未満の電話番号を入力した場合、ボタンをクリックすると検証エラーメッセージが表示されます。
次の手順では、ボタンのクリック時に contact フィールドを検証する Next ボタンのルールを作成します。
ユーザーが 10 で始まらない電話番号を入力すると、フィールドレベルでエラーメッセージが表示されることを示す次のイラストを参照してください。
ユーザーが有効な電話番号を入力し、personaldetails パネルのすべてのフィールドが検証されると、feedback パネルが画面に表示されます。
ユースケース：パネルをリセット
パネルをリセットするには、カスタム関数の作成の節の説明に従って、カスタム関数に次のコードを追加します。
/**
* resetField
* @name resetField
* @param {string} input1
* @param {object} field
* @param {scope} globals
*/
function resetField(field,globals)
{
globals.functions.reset(field);
}
reset() 関数で引数を渡さない場合は、フォームが検証されます。この例では、Clear ボタンをクリックすると personaldetails パネルがリセットされます。次のステップでは、ボタンのクリック時にパネルをリセットする Clear ボタンのルールを作成します。
ユーザーが clear ボタンをクリックすると、personaldetails パネルがリセットされることを示す次のイラストを参照してください。
ユースケース：フィールドレベルでカスタムメッセージを表示し、フィールドを無効としてマークするには
markFieldAsInvalid() 関数を使用すると、フィールドを無効として定義し、フィールドレベルでカスタムエラーメッセージを設定できます。fieldIdentifier の値は、fieldId、field qualifiedName または field dataRef に指定できます。option という名前のオブジェクトの値は、{useId: true}、{useQualifiedName: true} または {useDataRef: true} に指定できます。
フィールドを無効としてマークし、カスタムメッセージを設定するために使用される構文は次のとおりです。
globals.functions.markFieldAsInvalid(field.$id,"[custom message]",{useId: true});globals.functions.markFieldAsInvalid(field.$qualifiedName, "[custom message]", {useQualifiedName: true});globals.functions.markFieldAsInvalid(field.$dataRef, "[custom message]", {useDataRef: true});
フィールドレベルでカスタムメッセージを有効にするには、カスタム関数の作成の節の説明に従って、カスタム関数に次のコードを追加します。
/**
* customMessage
* @name customMessage
* @param {object} field
* @param {scope} globals
*/
function customMessage(field, globals) {
const minLength = 15;
const comments = field.$value.trim();
if (comments.length < minLength) {
globals.functions.markFieldAsInvalid(field.$id, "Comments must be at least 15 characters long.", { useId: true });
}
}
この例では、ユーザーがコメントテキストボックスに 15 文字未満を入力すると、フィールドレベルでカスタムメッセージが表示されます。
次の手順では、comments フィールドのルールを作成します。
comments フィールドに否定的なフィードバックを入力すると、フィールドレベルでカスタムメッセージが表示されることを示す次のデモを参照してください。
ユーザーがコメントテキストボックスに 15 文字以上を入力すると、フィールドが検証され、フォームが送信されます。
ユースケース：変更されたデータをサーバーに送信
次のコード行：globals.functions.submitForm(globals.functions.exportData(), false); は、操作後にフォームデータを送信するために使用されます。
- 最初の引数は、送信するデータです。
- 2 番目の引数は、フォームを送信する前に検証するかどうかを表します。これは
optionalであり、デフォルトではtrueに設定されています。 - 3 番目の引数は送信の
contentTypeです。これもオプションで、デフォルト値はmultipart/form-dataです。その他の値は、application/jsonとapplication/x-www-form-urlencodedに指定できます。
操作したデータをサーバーに送信するには、カスタム関数の作成の節の説明に従って、カスタム関数に次のコードを追加します。
/**
* submitData
* @name submitData
* @param {object} field
* @param {scope} globals
*/
function submitData(globals)
{
var data = globals.functions.exportData();
if(!data.comments) {
data.comments = 'NA';
}
console.log('After update:{}',data);
globals.functions.submitForm(data, false);
}
この例では、ユーザーが comments テキストボックスを空のままにすると、フォームの送信時に NA がサーバーに送信されます。
次に、データを送信する Submit ボタンのルールを作成します。
ユーザーが comments テキストボックスを空のままにすると、サーバーに NA の値が送信されることを示す次の console window のイラストを参照してください。
また、コンソールウィンドウを調べて、サーバーに送信されたデータを表示することもできます。
カスタム関数のキャッシュサポート
アダプティブフォームは、カスタム関数のキャッシュを実装して、ルールエディターでカスタム関数リストを取得する際の応答時間を短縮します。error.log ファイルに、Fetched following custom functions list from cache というメッセージが表示されます。
カスタム関数を変更すると、キャッシュは無効になり、解析されます。
トラブルシューティング
-
ユーザーは、コアコンポーネントと仕様のバージョンが最新バージョンに設定されていることを確認する必要があります。ただし、既存の AEM プロジェクトとフォームの場合は、追加の手順を実行する必要があります。
-
AEM プロジェクトの場合、ユーザーは、
submitForm('custom:submitSuccess', 'custom:submitError')のすべてのインスタンスをsubmitForm()に置き換えて、プロジェクトをデプロイする必要があります。 -
既存のフォームについて、カスタム送信ハンドラーが正しく機能していない場合は、ユーザーはルールエディターを使用して「送信」ボタンの
submitFormルールを開いて保存する必要があります。このアクションは、フォーム内の既存のルールをsubmitForm('custom:submitSuccess', 'custom:submitError')からsubmitForm()に置き換えます。
-
-
カスタム関数のコードを含む JavaScript ファイルにエラーがある場合、カスタム関数はアダプティブフォームのルールエディターにリストされません。カスタム関数リストを確認するには、エラーの
error.logファイルに移動します。エラーが発生した場合、カスタム関数リストは空で表示されます。
エラーがない場合、カスタム関数が取得され、
error.logファイルに表示されます。error.logファイルに、Fetched following custom functions listというメッセージが表示されます。
考慮事項
-
parameter typeとreturn typeはNoneをサポートしません。 -
カスタム関数リストでサポートされていない関数は次のとおりです。
- ジェネレーター関数
- 非同期／待機関数
- メソッドの定義
- クラスメソッド
- デフォルトのパラメーター
- Rest パラメーター