Customization issues

Common issues encountered while customizing an application provided portlet in a local development instance

Problem

When you extend an application-provided portlet, you might face one of the following issues with the customized portlet in the local development environment.

• The extended portlet appears blank.
• The custom bundle label that you added is incorrectly displayed.
• The application-provided and previously added bundle labels are incorrectly displayed.

You encounter these issues, if you partially or incorrectly implement the customization steps that are provided in Modifying application-provided portlets.

Solution

• For the extended portlet appears blank issue, complete the following steps:
  1. Check whether the portlet component class name is updated in the respective portlet’s component.ts file and passed in the portletname and componentName variables. For more information, see step 2 in Modifying application-provided portlets.
     The following sample code snippet explains how to extend the Pack order portlet:

     export class PackOrderPortletExtnComponent implements OnInit, OnDestroy {
     public static portletname = 'PackOrderPortletExtnComponent';
     public static componentName = 'PackOrderPortletExtnComponent'; }
     

  2. Import the updated portlet component class name to the app.module.ts file. For more information, see step 3 in Modifying application-provided portlets.
     The following sample code snippet explains how to import the updated portlet class name:

     import { PackOrderPortletExtnComponent } from './components/pack-order-portlet/pack-order-portlet.component' 
     export const customComponentDeclarations = [PackOrderPortletExtnComponent];

  3. Add extensionType:CODE in the isf-persona-config.json file to populate the portlet. Otherwise, the extended portlet appears blank. For more information, see step 4 in Modifying application-provided portlets.
• The custom bundle label that you added is incorrectly displayed.

  Consider a label bundle entry that is added to the corresponding json file. For more information, see What to do next in Modifying application-provided portlets.

  A sample snippet for /extensions/features/override-component/src/assets/override-component/i18n/en.json is as follows.

  {
                  "packPortletExtn":{
                  "LABEL_Select":"Select"
                    }
   }

  The corresponding entry is added to the portlet component HTML. Instead of the actual label, the packPortletExtn.LABEL_Select is displayed in the application.
  The sample code snippet is as follows.

  <span class="mx-2" >packPortletExtn.LABEL_Select</span>

  To resolve the issue, add the translate attribute in the portlet component HTML tag as illustrated.

  <span class="mx-2" translate>packPortletExtn.LABEL_Select</span>

• The application-provided and previously added bundle labels are incorrectly displayed.
  Ensure that the bundles static variable in the app.module.ts contains the assets that are loaded from the home application. For more information, see What to do next in Modifying application-provided portlets. Add the following sample entry:

  {
         prefix: './assets/home/i18n/',
         suffix: '.json'
  }