Using custom Angular scripts to add a custom component

Use the custom library application provided with the Persona-based UI installer to develop Custom Actions, Custom Tabs, or Custom Tools.

Before you begin

Before you upgrade, take a backup of the custom code. Upgrading replaces existing JS files.

Procedure

To add a custom component, proceed as follows.

  1. Download the custom-library.zip file available in the $TOP/mdmui/samples folder.
  2. Extract the custom-library.zip file.
    Following are the main folders in the custom-library folder.
    custom-library\src\app
    The app folder has the following subfolders.
    • persona-custom-tabs
    • persona-custom-tools
    • preview-script
    Each subfolder has a component folder. You need to add your custom component to this folder.
  3. Delete the package-lock.json file and all the existing node modules.
  4. Install the Node.js Version 18.17.1.
  5. Open the custom-library folder in the Visual Studio Code editor.
  6. In the command terminal, run the following command.
    npm install
  7. Update your existing components according to Angular Version 17. For more information, see Developing custom components - Guidelines.
  8. Delete the existing Angular customization Lookup tables, and re-import the mdmce-env.zip file to fetch the latest Lookup table structure.
    Note: When you delete existing Lookup tables, entries in such Lookup tables also get deleted. After importing the latest Lookup table structure, you need to manually add such entries again.
  9. Add entries of the components in the following Lookup tables.
    Lookup table Column Description

    SYS_NG_CUSTOM_TABS

    SYS_NG_CUSTOM_TOOL

    SYS_NG_PREVIEW_SCRIPT

    		 DisplayName Specifies the display name for the custom components.
    Selector name Specifies the value of the selector property of the Angular custom component.
    Container Specifies the comma-separated container names to which customization is going to be applied.

    Only present in the Custom Tab and Custom Preview Script Lookup tables.
    Roles Specifies the comma-separated roles.

    Only present in the Custom Tools Lookup table.
  10. Run the following command.
    npm run generateLibrary
    The application creates .bundle inside the respective module bundle folder in the mdm_ui/js/custom folder.
  11. Copy the generated JS files to the $TOP/mdmui/custom/ui/js folder.
  12. Run the $TOP/mdmui/bin/updateRtProperties.sh script for WebSphere® Application Server-based on-premise deployments. The script copies files to the following folder in the WebSphere Application Server.
    $WAS_HOME/profiles/<WAS profile>/installedApps/<NodeCell>/mdm_ui.war.ear/mdm_ui.war/js/custom
    Note: For Operator-based deployments, see Installing by using containerized deployment.
  13. Press Ctrl + Shift + Delete to clean the browser cache and close all the browser instances.
  14. Open a new browser and verify that your changes reflect in the Persona-based UI.