Angular プロバイダーでのコンポーネントの再利用

Angular プロバイダーは、複数のウィジェットに挿入できる再利用可能なコンポーネントです。ウィジェットのすばやいロードとポータルの高いパフォーマンスを確保するため、永続データと追加ロジックによってクライアント コントローラーをオーバーロードする代わりに Angular プロバイダーを作成します。Angular プロバイダーを使用すると、サービスポータルを使用する全期間データを維持し、複数のウィジェット間でコンポーネントとデータ オブジェクトを再利用することができます。

始める前に

必要なロール：admin または sp_admin

このタスクについて

Angular プロバイダーを作成すると、以下のことが可能になります。

• レコードやフィルターを変更するときにウィジェットの同期状態を保つ。
• ウィジェット間のコンテキストを共有する。
• 状態を維持し、持続させる。
• 動作を作成し、複数のウィジェットに挿入する。

詳細については、「Angular プロバイダー」を参照してください。

ヒント:

簡単にメンテナンスしてトラブルシューティングするには、ウィジェット [sp_widget] テーブルの [Angular プロバイダー] 関連リストから未使用のプロバイダーを削除します。

手順

1. 移動先 すべて > サービスポータル > Service Portal の構成 > ポータルテーブル > ウィジェット Angular プロバイダー.
   [ウィジェット Angular プロバイダー] テーブルが開きます。
2. [新規] をクリックして、新しいレコードを作成します。
3. Angular プロバイダーのタイプを選択します。
   • ディレクティブ
   • ファクトリ
   • サービス
   ECMAScript 6 以降に移行しやすくするため、ファクトリを介してサービスを使用することを検討してください。
4. 名前を定義します。
   この名前を使用して、プロバイダーをウィジェットに関連付けます。
5. [クライアント スクリプト] フィールドでスクリプトを追加します。

   米国の通貨で数値をフォーマットする基本的なファクトリです。

   function formatterFactory(){
     var myVal = Number;
     return {
       format: function(myVal) {
         return '$' + myVal.toFixed(2);
       }
     }
   }

6. Angular プロバイダーをウィジェットに関連付けます。
   1. <yourInstanceURL>/sp_config?id=widget_edit に移動します。
   2. Angular プロバイダーに関連付けるウィジェットを開きます。
   3. [関連リスト] で、[Angular プロバイダー] を選択します。
   4. [Angular プロバイダー] リストで、[新規] をクリックします。
   5. [Angular プロバイダー] フィールドで、適切なプロバイダーを選択します。
   6. [ウィジェット] フィールドをチェックし、Angular プロバイダーを正しいウィジェットに関連付けようとしていることを確認します。
   7. [保存] をクリックします。
7. ウィジェットで適切なスクリプトを更新し、Angular プロバイダーをウィジェットに挿入します。

   ファクトリの名前をクライアント コントローラー関数の引数として渡し、ファクトリをウィジェット クライアント スクリプトに挿入します。これで、ウィジェット クライアント スクリプトのファクトリ関数で定義されたオブジェクトにアクセスできるようになりました。

   function(formatterFactory) {
     /* widget controller */
     var c = this;
     console.log(formatterFactory.format(300));
   }

   ディレクティブを定義する場合、ウィジェット HTML テンプレートでディレクティブを使用してください。

8. ウィジェットに登録した後に Angular プロバイダーを編集するには、ウィジェット エディターで Angular プロバイダー クライアント スクリプトを開きます。
   1. 移動先 Service Portal の構成 > ウィジェットエディター.
   2. [既存のウィジェットを編集します] で、Angular プロバイダーに関連付けられたウィジェットを選択します。
   3. 「 表示 」メニューから 「依存関係 」リストを開き、「Angularプロバイダー」を選択します。
      注:

      ウィジェットに関連付けられた Angular プロバイダーのみが [依存関係] リストに表示されます。このリストには、ウィジェットが依存する外部リソースが含まれます。
      Angular プロバイダー クライアント スクリプトがウィジェット エディターに表示されます。ウィジェット エディターのインターフェイスでは、ウィジェットとプロバイダー スクリプトを同時に編集して保存することができます。

次のタスク

複数のウィジェットを持つ Angular プロバイダーを使用するには、プロバイダーに各ウィジェットを登録し、適切なスクリプトを更新します。