カスタムJavaScriptファンクションの追加

機械翻訳について

カスタムJavaScriptファンクションの追加

カスタムのJavaScript関数を追加するには、ページ、フローまたはapplicationのJavaScriptエディタで提供されているモジュール・クラス内で関数を定義します。これは、レイアウトおよびフラグメントに対しても実行できます。

JavaScriptファンクションを追加するアーティファクトを開き、JavaScriptタブを選択します。

たとえば、複数のページでJavaScript関数を使用するには、アプリケーション・レベルまたはそれらのページのフロー・レベルで関数を定義できます。 applicationレベルでファンクションを定義するには、applicationノードを選択し、JavaScriptタブをクリックします:

図page-functions-editor.pngの説明

JavaScript関数は、アーティファクトのスコープに基づいて異なるファイルで定義されます。 applicationはapp-flow.jsファイルを使用し、フローはflow-name-flow.jsを使用し、ページはpage-name-page.jsを使用します。さらに、レイアウトではlayout.jsが使用され、フラグメントではfragment-name-fragment.jsが使用されます。
JavaScriptエディタに用意されているモジュール・クラス(AppModule、FlowModuleまたはPageModule)内でJavaScript関数を定義します。フラグメントまたはレイアウトを使用する場合は、FragmentModuleまたはLayoutModuleを使用します。
たとえば、アプリケーション・レベルの関数を定義するには、AppModuleクラス内で関数を定義します:
```
define([], () => {
  'use strict';

  class AppModule {
  // write your function here
  }
 
  return AppModule;
});
```
次に、文字列を取得し、テキストを追加してその文字列を返すAppModule関数の例を示します:
```
define([], () => {
  'use strict';

  class AppModule {
   // Code for a custom AppModule method
    myAppModuleMethod(s) {
      return s + " has visited my AppModule method";
    }
  }
 
  return AppModule;
});
```
クラス内のいずれかの関数がアプリケーション・コンテキストにアクセスする必要がある場合は、そのクラスのコンストラクタを作成し、コンテキストを入力パラメータとして含めてください:
```
constructor(context){}
```
PageModuleクラスに2つの関数が作成されている別の例を次に示します: コンストラクタとモジュール関数。ページを開くと、そのページに対応するPageModuleクラスのインスタンス(次を参照)が作成されます。また、インスタンスのコンストラクタが自動的にコールされ、アプリケーション・コンテキストがコンストラクタに渡されます:
```
define([], () => {
  'use strict';

  class PageModule {
   
    constructor(context) {
      this.eventHelper = context.getEventHelper();
    }

    fireSomeCustomPageEvent() {
      this.eventHelper.fireNotificationEvent(
           {summary: 'Summary here', message: 'Message here,'});
    }
  }
 
  return PageModule;
});
```
JavaScriptエディタでコードを記述するときは、コード補完機能を提供する提案を利用します。これには、"for"、"while"ループ、条件文などの一般的なJavaScript構造のコード・スニペットが含まれます。たとえば、エディタにforと入力すると、様々な"for"ループ構造が表示されます:

図js-code-complete-example.pngの説明

構造を選択すると、構造内の変数を簡単に切り替えることができます。
コード内の構文エラーに注意してください。構文の問題がある行には右マージンにフラグが付けられ、これを「監査」ペインから解決できます。左余白の電球アイコンは、無効なコードを修正するために使用できるヒントを示します。

図jssyntaxissue.jpgの説明
JavaScript構文のヘルプは、https://developer.mozilla.org/en-US/docs/Web/JavaScript#referenceを参照してください。次の追加リソースも役立ちます:
- https://www.w3schools.com/js/js_es6.asp
- https://www.javascripttutorial.net/es6/

カスタムJavaScript関数を定義した後、アクション・チェーンおよびUIコンポーネントでコールできます:

アクション・チェーンで、関数を呼び出すアクションで関数を選択します。

UIで入力コンポーネントにテキストを入力し、ボタンをクリックしてそのテキストを渡し、変更して出力コンポーネントにバインドする関数を呼び出す必要があるとします。入力コンポーネントはInputVariableにバインドされ、出力コンポーネントはOutputVariableにバインドされます。ここで、ボタンのクリック時にトリガーされるアクション・チェーンを作成します。ここで、コール関数アクションはカスタム関数をコールし、その入力パラメータをInputVariableにマップし、その後に関数の出力をOutputVariableに割り当てる「変数の割当て」アクションが続きます:

図jscallfunction.jpgの説明
コンポーネントの「プロパティ」ペインで、プロパティの「式」エディタまたは「変数」ピッカーで関数を選択します。

UIがRESTサービスからデータをフェッチし、入力日時コンポーネントに表示される値を変換するとします。 IntlDateTimeConverter APIを使用するコンバータ関数を追加することで、「変数」ピッカーでカスタム関数を選択して、値を適切な日時形式に変換できます:

図js_functions_variablepicker.pngの説明

参照されるフィールドが使用できない、またはフィールド値がnullである可能性がある状況を処理する効率的な式を記述するには、「参照されるフィールドが使用できない、またはその値がnullである可能性がある場合に式を記述する方法」を参照してください