Modifying application-provided portlets
You can copy application-provided portlets and customize the portlet as needed for your business.
All the application-provided portlets are present in the
<WORKSPACE>/store-frontend/src/app/features/home/portlet-set folder.
Each portlet folder normally contains the following set of files:
| File | Purpose |
|---|---|
| <name>-portlet-component.ts | The application logic of the portlet is defined in this class component. |
| <name>-portlet-component.html | The HTML of the portlet that needs to be rendered in the DOM. |
| <name>-portlet-component.scss | Defines CSS to be used in portlet. |
| <name>-portlet-data.service.ts | Contains methods for fetching the data using APIs and other utility methods required for a portlet. |
To customize the application-provided portlet, perform the following steps:
- Browse to the corresponding portlet folder and copy the files to the appropriate location under
SCREEN_EXTENSIONS_HOME/features/home/portlet-set
Let's say that you want to customize the Pick order portlet, then copy the pick-order-portlet folder from <WORKSPACE>/store-frontend/src/app/features/home/portlet-set to <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set.
You can create the appropriate folder structure features/home/portlet-set under SCREEN_EXTENSIONS_HOME, if already not present.
- After copying the appropriate portlet folder, you can customize the portlet based on your needs.
Important:
- Once you copy the portlet folder in SCREEN_EXTENSIONS_HOME/features/home/portlet-set, you own the complete portlet component including HTML, SCSS, TS & related data service files. Even if you have to modify only HTML or SCSS file, you still need to copy the complete folder.
- This ensures seamless upgrade.