Using custom Angular scripts to add a custom component (Fix Pack 10 and earlier)

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

Before you begin

Fix Pack 10 and earlier

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

Procedure

To add a custom component, proceed as follows.

Download the custom-library.zip file available in the $TOP/mdmui/samples folder.
Delete the package-lock.json file and all the existing node modules.
Open the custom-library folder in the Visual Studio Code editor.
In the command terminal, run the following command.
```
npm install
```
Create components inside the predefined custom module. For more information, see Developing custom components - Guidelines.

Fix Pack 10Add entries of the components in the following Lookup tables.

Starting from IBM® Product Master Fix Pack 10 onwards, you need to 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.

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.

Fix Pack 9Add entries of the components in the following Lookup tables.

Important: Starting from IBM Product Master Fix Pack 9 onwards, you need to use the listed Lookup tables instead of the JSON files to add the Angular custom components. For an existing Angular customization, you need to migrate the data from the JSON files to the system-based 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.
	Component	Specifies the value of the selector property of the Angular custom component.
	Type	Specifies the custom type and thus helps in the identification.
	Container	Specifies the catalog or collaboration area name. Only present in the Custom Tab and Custom Action.

Run the following command.
```
npm run generateLibrary
```
The application creates .bundle inside the respective module bundle folder in the mdm_ui/js/custom folder.
Copy the generated JS files to the $TOP/mdmui/custom/ui/js folder.
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.
Press Ctrl + Shift + Delete to clean the browser cache and close all the browser instances.
Open a new browser and verify that your changes reflect in the Persona-based UI.