How To
Summary
How to add custom Font Icon to the custom portlet in IBM Sterling Store Engagement?
Objective
1) Adding Custom Portlet
2) Adding Custom Font Icon
Steps
A) Follow this link to create Miniportlet:
https://www.ibm.com/docs/en/store-engagement?topic=portlets-creating-portlet
Steps:
1) Go to the <store-frontend-src>/extensions/features/override-component/src/app/components folder.
1) Go to the <store-frontend-src>/extensions/features/override-component/src/app/components folder.
2) To create a portlet component, run the following command:
ng g c <portlet component name> --prefix=isf
for e.g.
ng g c testPortlet --prefix=isf
3) Go to the <store-frontend-src>/extensions/features/override-component/src/app
4) Open the app.module.ts file, and update the custom component class name in the customPortletsDeclarations object:
Add a portletname and componentName static string variables with the value as the portlet component class name as illustrated
export class CheckoutPortletComponent {
public static portletname = 'testPortlet'; // The class name of the component should be the value for portletname.
public static componentName = 'testComponent'; // The class name of the component should be the value for componentName.
}
5) create an angular service for the new portlet component by running the following command:
ng g s testServiceName
6) Register the new portlet to an existing order fulfillment or inventory management view.In the <store-frontend-src>/extensions/override-static-assets/portlets/config/isf-persona-config.json file, define the portlet JSON configuration as follows.
{
"personaName": "Order_Fulfillment",
"personaIconClass": "app-icon-order_fulfill_20",
"portlets": [
{
"portletTitleBundleKey": "testPortlet.TITLE_testPortlet",
"portletTID": "testPortlet",
"extensionType": "CODE",
"portletSequenceNumber": 30,
"portletComponent": "testComponent",
"portletIconClass": "custom-icons", //This is the font Icon class, that we will be creating in next steps.
"portletColor": "#007BFF",
"resourceId": "ISF000048",
"requiresMultiLocation": false,
"requiresInventory": false,
"sitemap": [
{
"portletBundleKey": "sitemap.TITLE_testPortlet",
"relativeUrl": "/store-frontend/invoice/invoice-list"
}
]
}
7) In the <store-frontend-src>/extensions/override-static-assets/home/i18n/en.json file, define the translation bundle entry for the portletTitleBundleKey attribute as shown.
{
"testPortlet": {
"TITLE_testPortlet": "testPortlet"
}
}
B) Follow this link to add Font Icon to the custom portlet: https://www.ibm.com/docs/en/store-engagement?topic=interface-customizing-application-style
1) Create or locate existing SVG font file and copy it in <store-frontend-src>/extensions/libs/styles/src/styles
2) Open and add following line to <store-frontend-src>/extensions/libs/styles/src/styles/custom_styles.scss file
*/@import './custom-icons/icomoon';
3) Create SCSS file : <store-frontend-src>/extensions/libs/styles/src/styles/custom-icons/icomoon.scss and add following lines:
.custom-icons {
//use !important to prevent issues with browser extensions that change fonts
//font-family: 'CustomIcons'!important;
content: "";
//display: inline-block;
display: inline-flex; // Use flexbox for easier centering
align-items: center; // Center vertically
justify-content: center; // Center horizontally
width: 60px; // Set your icon size
height: 60px; // Set your icon size
background-image: url('./torsos_all_female.svg'); // Specify the name and path to your SVG icon
background-size: cover;
background-position: center; // Ensure the image is centered within the container
background-repeat: no-repeat;
}
4) Note the class name "custom-icons", this must be used in <store-frontend-src>/extensions/override-static-assets/portlets/config/isf-persona-config.json file:
{
"personaName": "Order_Fulfillment",
"personaIconClass": "app-icon-order_fulfill_20",
"portlets": [
{
"portletTitleBundleKey": "testPortlet.TITLE_testPortlet",
"portletTID": "testPortlet",
"extensionType": "CODE",
"portletSequenceNumber": 30,
"portletComponent": "testComponent",
"portletIconClass": "custom-icons", //This is the font Icon class name.
"portletColor": "#007BFF",
"resourceId": "ISF000048",
"requiresMultiLocation": false,
"requiresInventory": false,
"sitemap": [
{
"portletBundleKey": "sitemap.TITLE_testPortlet",
"relativeUrl": "/store-frontend/invoice/invoice-list"
}
]
}
5) Run the commands in following sequence to do yarn start-app:
export NODE_OPTIONS=--max_old_space_size=8192
yarn cache clean
yarn start-app
6) Use the following link to access customized Store frontend:
http://localhost:9000/isf/store-frontend/shell/home/Order_Fulfillment
7) Notice that the new SVG font is being added to the mini-portlet called "testPortlet"
Document Location
Worldwide
[{"Type":"MASTER","Line of Business":{"code":"LOB77","label":"Automation Platform"},"Business Unit":{"code":"BU048","label":"IBM Software"},"Product":{"code":"SS6PEW","label":"IBM Sterling Order Management"},"ARM Category":[{"code":"a8m0z000000cxzVAAQ","label":"Call Center Store and SIM"}],"ARM Case Number":"TS017835415","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions"}]
Product Synonym
store engagement; sterling store; store;
Was this topic helpful?
Document Information
Modified date:
12 March 2025
UID
ibm17185511