Traditional Webのモジュールには「JavaScript」プロパティがあります。
ここに定義したJavaScript関数はどの画面でも使用可能になるため、モジュール内で共通利用する関数を定義する場所として利用されています。
Forgeにあるモジュールに、このプロパティで定義したJavaScriptライブラリがエラーになるケースがあったので、原因を調査してみました。
環境情報
Personal Environment(Version 11.9.0 (Build 16900))
Service Studio(Version 11.8.7)
jQuery UI Drag and Drop and Sort(Version 2.0.2)
発端
Forgeにある、jQuery UI Drag and Drop and Sortの動作確認をしていたところ、ドラッグもドロップもできない（UI要素をドラッグ＆ドロップする機能を提供するモジュールです）。
Chromeのデベロッパーツールで確認すると、以下のJavaScriptエラー。
$(...).draggable is not a function
というエラーメッセージは、モジュールが内部で使用しているjQuery UIの読み込みに失敗していそうな印象。
Forgeモジュールを調査
モジュールのJavaScriptに、以下のようなJavaScriptコードが設定されていました。
コメントを読むと、jQuery UIとその関連ライブラリ。
このコードをWeb Blockにラップしてテスト画面に配置してみるとエラーが消え、ドラッグ＆ドロップができるようになりました。
つまり、モジュールのJavaScriptプロパティに設定したコードは、同じモジュール内の画面でしか実行されないのでは？ という仮説。
モジュールのJavaScriptプロパティについて
Traditional Web のモジュールにあるプロパティで、モジュール内で共通利用する関数を定義する場所です。
なお、ReactiveやMobileのモジュールにはありません。
Moduleのプロパティ
このForgeコンポーネントのように、部品提供するモジュールのJavaScriptプロパティのコードは実行されないのではないか？ という点に答えてくれそうな記述が動画にありました。
JavaScript and jQuery in Traditional Web Applicationsというコース内で、
... is a JavaScript property this includes a JavaScript code and this code will be added to every single screen that is defined for this module ...
「同じモジュール内のすべての画面に定義したJavaScriptが追加される」ので、Web Blockを利用する別のモジュール内の画面には読み込まれないのではないかと思われます。
実際に参照先モジュールのBlockを配置して動作確認
以下のようにJavaScript関数を用意して、Consumerモジュールで各関数を呼び出してみました。
それぞれ、alertでメッセージを出すだけの簡単なもの。メッセージはそれぞれ変えてある。
- Producerモジュール
- モジュールのJavaScriptプロパティに関数定義
- Web Blockを作成してそのJavaScriptプロパティにも関数定義
- Consumerモジュール
3. モジュールのJavaScriptプロパティに関数定義
4. 画面を作成してProducerのBlockを配置し、定義した3つの関数を実行
すると、2と3の関数は実行でき、1が実行できないという想定通りの結果。
Chromeのデベロッパーツールでネットワークタブを確認すると、モジュールのプロパティに定義したJavaScriptは以下のように、「_OSGlobalJS.js」というファイルとして読み込まれるようです。
下のスクリーンショットは3の関数定義：
Producerモジュールに画面を作成すると、同名ファイルに1の関数定義が読み込まれました。
というわけで、動作確認結果でも、「部品提供するモジュールのJavaScriptプロパティは、参照側画面には読み込まれない」ということがわかりました。