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
-
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. - 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. - You can define additional providers in the constructor of
mini-portlet-data.service.ts
. Ensure the additional providers are not passed tosuper(injector)
method. - 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 theminiPortletCountProvider
attribute inextensionPersonaConfigList
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.
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;
});
}
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
}
]
}
];
- Do not pass additional parameters to
super
in the constructor ofmini-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.