Next-generation platformDeprecated

Displaying count badges for Custom Mini Portlets

About this task

The mini view of portlets is displayed when portlets overflow into the More Tasks portlet. The mini view of portlets displays a badge, which indicates the number of tasks associated with that portlet. The badge value is returned from a service method that is mentioned in the miniPortletCountProvider attribute in extensionPersonaConfigList in the store-customization-impl.ts file. The miniPortletCountProvider should contain the method name (as string), which will be invoked to fetch the count value displayed as badge in More Tasks, mini portlet view. This method will be invoked on MiniPortletDataService.

Procedure

  1. Copy mini-portlet-data.service.ts from <WORKSPACE>/store-frontend/src/app/features/home/portlet-set/mini-portlet to <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set/mini-portlet folder.
  2. Define a new method with public access modifier in mini-portlet-data.service.ts. Write the necessary logic to fetch the count value and ensure that this method returns a Promise with just the count value and not the JSON object.
  3. You can define additional providers in the constructor of mini-portlet-data.service.ts. Ensure the additional providers are not passed to super(injector) method.
  4. Define the method name in a variable as a string by using public static read-only access modifiers in mini-portlet-data.service.ts. This variable should be assigned to the miniPortletCountProvider attribute in extensionPersonaConfigList in the store-customization-impl.ts file.

Example

Let's say that you have created a new custom portlet UserPortlet and want to display the number of store users as badge count in mini portlet view. To do so, you must write a new method in mini-portlet-data.service.ts and define the method name as a string constant by using public static read-only access modifiers.

A sample mini-portlet-data.service.ts is as follows:

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;
  });
 }
A sample store-customization-impl.ts is as follows:

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
			}
		]
	}
];
Notes:
  • Do not pass additional parameters to super in the constructor of mini-portletdata.service.ts.
  • Do not remove any application-provided parameters that are defined in the constructor of miniportlet-data.service.ts during customization. Any change leads to errors.