アセットは、ページとフォームに web リソースを追加可能にします。使用可能なアセットのタイプは、JavaScript、CSS、イメージ、および ローカライゼーション （サブスクリプション版のみ）です。アセットはローカル（アーティファクトに格納されたファイル）または外部（URL）に所在できます。外部アセット名は標準形式のURLでなければなりません。ローカライゼーション アセットは常にローカルです。
ページ エディタ内のアセット
アセットは、ホワイトボードの下部にある [アセット] タブを使用して管理します。
CSS アセット
CSS アセットをページレベルに追加し、任意のウィジェットのCSS クラスのプロパティを編集するためにそれを使用します。UI デザイナーはデフォルトのBootstrap スタイルと連携します。
たとえば、次のコンテンツを持つ mycss.css ファイルを作成する例は次のとおりです：
background-color : #404853;
color: #ffffff;
}
- [アセット] パネルで [新規アセットを追加] をクリックします。
- CSS のタイプを選択します。
- ソースをローカルに設定します。
- あなたの CSS ファイルをアップロードします。そのファイルはアセット リストに現れます。
- テキスト ウィジェットをホワイトボード上にドラッグします。
- このウィジェットを選択します。
- プロパティ パネルであなたの CSS クラスを次のように追加します。
- プレビューボタンをクリックします。グレーの背景に白いテキストのテキスト ウィジェットが表示されます。
イメージ アセット
イメージ アセットは、カスタム ウィジェット内に表示させることができます（カスタム ウィジェット エディタ > アセットのヘルプ）。イメージをカスタム ウィジェット プロパティとして使用する場合には、ページレベルにイメージ アセットを追加します。
JavaScript アセット
JavaScript アセットを使用してスクリプトを追加できます。それはグローバルスコープでロードされ、データの中でそれを使用できます。
たとえば、このウェルカムメッセージを表示するために myscript.js のスクリプトを追加する例は次のとおりです：
function hi(name){
return 'Welcome ' + name + ' to the UI Designer';
}
このアセットを追加し使用するためには：
- [アセット] パネルで [新規アセットを追加] をクリックします。
- JavaScript のタイプを選択します。
- ソースをローカルに設定します。
- あなたの JavaScript ファイルをアップロードします。そのファイルはアセット リストに現れます。
- [変数] パネルで “name” という新しい String 変数を追加します。
- “hi” 関数という JavaScript expression を作成します。
- “name” 変数にバインドした入力ウィジェットと “hi” 変数にバインドしたテキスト ウィジェットを追加します。
- プレビューボタンをクリックします。ウェルカムメッセージを含んだページが表示されます。name 変数の値を変更すると name フィールドが変わります。
ローカライゼーション アセット（サブスクリプション版のみ）
ページのローカライゼーション アセットは、 localization.json というローカル ファイルで、あなたがサポートしたい言語でページを表示する翻訳テキストを含みます。これを使用して複数言語ページを作成することが可能になります。
１つのページは、２つ以上のローカライゼーション アセットを持つことはできません。新しい localization.json アセット ファイルをアップロードすると、それが既存のファイルを上書きします。
アセット リスト
このリストは、そのページ内で使用されるページアセットとカスタム ウィジェットのアセットの両方を含みます。
このリストでは、ページ アセットのみの削除、ローカル アセットの参照、外部アセットの編集ができます。ページ内のアセットの順番を手作業で変更することはできません。どのアセットをアクティブにするか指示することができます。１つのページ内に複数のアセットバージョンが指定されている場合は、それらの依存性の衝突を避けるため、必ずそれらのうちの１つだけをアクティブにするようにします。
カスタム ウィジェットは実行時に、そのカスタム ウィジェットのアルファベット順のロードされます。それぞれのカスタム ウィジェットのアセットは、このアセットリストの順番にロードされます。その後にページ アセットがロードされます。JavaScript と CSS のアセットはページヘッダーの中にロードされます。
カスタム ウィジェット エディタ内のアセット
いくつかのページで同じアセットを使用するためには、カスタム ウィジェットにそれを追加し、そのカスタム ウィジェットをアプリケーション ページやフォームで使用できます。アセットを持つカスタム ウィジェットをページに追加する場合、それらのアセットはそのページに自動的にリンクされます。ただし、カスタム ウィジェットには、ローカライゼーション アセットを含めることができません。その代替として、カスタム ウィジェットが使用される各ページのローカライゼーション アセット内にそのテキストと翻訳を含めます。
JavaScript アセット
JavaScript アセットでは、Angular モジュールの依存性を指定することができます。初めに JavaScript アセットを追加した後、その専用セクションでモジュール名を追加します。http://ngmodules.org/ で利用可能なモジュールを見つけることができます。
イメージ アセット
カスタム ウィジェット エディタでは、２つのプロパティを使用してウィジェットを作成します：
{name : “description”, type : “text”}
コントローラーを定義する必要はありませんが、HTML テンプレートを作成する必要があります：
<img ng-src="{{properties.src}}" alt="{{properties.description}}">
これで、イメージ アセットを追加し、イメージを指し示すために src プロパティを変更することによって、このカスタム ウィジェットを任意のページで使用できます。外部アセットにはURL を指定します。ローカルのイメージをロードするには、相対パスを次のように指定します：
assets/img/[image name]ページに追加されるローカルのイメージの場合widgets/[custom widget name]/assets/img/[image name]ウィジェットに追加されるローカルのイメージの場合
アセット リスト
このリストでは、矢印を使ってアセットの順序を変更したり、ローカル アセットの参照、外部アセットの編集、アセットの削除ができます。どのアセットをアクティブにするか指示することもできます。１つのページ内に複数のアセットバージョンが指定されている場合は、それらの依存性の衝突を避けるため、必ずそれらのうちの１つだけをアクティブにするようにします。
実行時、カスタム ウィジェットのアセットは定義した順番にロードされます。
Bonita BPM 日本語ドキュメント 