Adding a new view and portlet

You can add a new view to the application menu and create the corresponding portlet.

1. Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present.
   SCREEN_EXTENSIONS_HOME/features/home/portlet-set
   Note:

   The folder structure provided in this step contains the application-provided portlets. It is a good practice to create new portlets in the same path.

2. Go to the SCREEN_EXTENSIONS_HOME/features/home/portlet-set folder.
3. Copy portlet-set-extension.module.ts from <WORKSPACE>/store-frontend/src/app/features/home/portlet-set to <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set folder.
   
   If portlet-set-extension.module.ts is already present then do not copy the file. Custom portlet components and providers are declared in this file.
4. To create a new portlet, perform the following steps:
   
   1. Run the command: ng g c <componentName> --project=store-extensions --skip-import
      Note: It is mandatory to pass the argument --project=store-extensions. Failing to do so will create the component in the application-provided src folder (<WORKSPACE>/store-frontend/src). The files created here are ignored and not rendered on browser.
   2. Update the portlet component class name in declarations @NgModule decorator in portlet-set-extension.module.ts.
      Note:

      • Ensure that you import the corresponding portlet component classes into portlet-set-extension.module.ts.
      • Ensure that you are importing from store-extensions-src and not from the store-app-build folder.
5. To create a service or provider for the new portlet component, perform the following steps:
   1. Run the command: ng g s <serviceName> --project=store-extensions
      Note: It is mandatory to pass the argument --project=store-extensions. Failing to do so will create the component in the application-provided src folder (<WORKSPACE>/store-frontend/src). The files created here are ignored and not rendered on browser.
   2. Update the service or provider name in providers of @NgModule decorator in portlet-set-extension.module.ts.
6. Read View-Portlet registration. Register the portlet to a view in one of the following ways:
   • Register the portlet to a new view specification.
     For example, if you want to add a custom portlet to the ‘User_Management’ view, the JSON specification will look like:

     {
             personaName: ‘User_Management',
             personaIconClass: 'app-icon-user_mgmt_20',
             portlets: [
                 {
                     portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                     portletSequenceNumber: 4,
                     portletComponent: UserPortletComponent,
                     portletTID: ‘userPortlet',
                     resourceId: 'ISF000004’
                 }
             ]
         }

   • Register the portlet to an existing view specification.
     1. If you want to add a custom portlet to an existing view, say Inv_Management, the JSON specification will look like:

        {
                personaName: ‘Inv_Management',
                portlets: [
                    {
                        portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                        portletSequenceNumber: 4,
                        portletComponent: UserPortletComponent,
                        portletTID: ‘userPortlet',
                        resourceId: 'ISF000004’
                    }
                ]
            }

     2. In the store-customization-impl.ts file, update the extensionPersonaConfigList property in the portlet-view JSON specification as follows:

        static extensionPersonaConfigList: IPersonaConfig[] = [
                                        {
                personaName: ‘Inv_Management',
                personaIconClass: ‘app-icon-inventory_mgmt_20’,
                portlets: [
                    {
                        portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                        portletSequenceNumber: 4,
                        portletComponent: UserPortletComponent,
                        portletTID: ‘userPortlet',
                        resourceId: 'ISF000004’
                    }
                ]
            }
                                ];

   Note: Views are defined at hub level and are not permission-controlled. However, if you do not have permission for any portlet for a view, then that view is not displayed in the side navigation panel of the application.