カスタム・ミニ・ポートレットのカウント・バッジの表示

このタスクについて

ポートレットが「その他のタスク」ポートレットにオーバーフローすると、ポートレットのミニ・ビューが表示されます。ポートレットのミニ・ビューには、そのポートレットに関連付けられているタスクの数を示すバッジが表示されます。バッジ値は、 store-customization-impl.ts ファイル内の extensionPersonaConfigList の miniPortletCountProvider 属性で指定されているサービス・メソッドから返されます。 miniPortletCountProvider には、メソッド名が (ストリングとして) 含まれている必要があります。これは、「その他のタスク」のミニ・ポートレット・ビューでバッジとして表示されるカウント値を取り出すために呼び出されます。このメソッドは MiniPortletDataServiceで呼び出されます。

手順

mini-portlet-data.service.ts を <WORKSPACE>/store-frontend/src/app/features/home/portlet-set/mini-portlet から <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set/mini-portlet フォルダーにコピーします。
mini-portlet-data.service.tsで、パブリック・アクセス修飾子を使用して新規メソッドを定義します。カウント値をフェッチするために必要なロジックを作成し、このメソッドが、JSON オブジェクトではなくカウント値のみを持つ Promise を返すようにします。
mini-portlet-data.service.tsのコンストラクターで追加のプロバイダーを定義できます。追加のプロバイダーが super(injector) メソッドに渡されていないことを確認してください。
mini-portlet-data.service.tsで public 静的読み取り専用アクセス修飾子を使用して、変数内のメソッド名をストリングとして定義します。この変数は、 store-customization-impl.ts ファイル内の extensionPersonaConfigList の miniPortletCountProvider 属性に割り当てる必要があります。

例

例えば、新規カスタム・ポートレット UserPortlet を作成し、ストア・ユーザーの数をバッジ・カウントとしてミニ・ポートレット・ビューに表示するとします。これを行うには、 mini-portlet-data.service.ts で新規メソッドを作成し、public 静的読み取り専用アクセス修飾子を使用してメソッド名をストリング定数として定義する必要があります。

サンプル mini-portlet-data.service.ts は以下のとおりです。


public static readonly USERS_PORTLET_COUNT_METHOD_NAME = 'getUserPortletCounts';
 constructor(
  injector: Injector,
  private userDataService: UserPortletDataService
  ){
   super(injector);
  }

public getUserPortletCounts() {
 return this.userDataService.getUsersCount().then(data => {
  return data.totalUserCount;
  });
 }

サンプル store-customization-impl.ts は以下のとおりです。


static extensionPersonaConfigList: IPersonaConfig[] = [
	{
		personaName: 'Order_Fulfillment',
		personaIconClass: 'app-icon-inventory_mgmt_20',
		portlets: [
			{
			portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
			portletTID: ‘userPortlet',
			portletSequenceNumber: 1,
			portletComponent: UserPortletComponent,
			portletIconClass: 'app-icon-Userʼ,
			portletColor: ‘#BA4C09ʼ,
			resourceId: 'ISF000025ʼ,
			miniPortletCountProvider:
			MiniPortletDataService.USERS_PORTLET_COUNT_METHOD_NAME
			}
		]
	}
];

注:

mini-portletdata.service.tsのコンストラクターで super に追加のパラメーターを渡さないでください。
カスタマイズ時に、 miniportlet-data.service.ts のコンストラクターで定義されているアプリケーション提供のパラメーターを削除しないでください。変更するとエラーが発生します。