Creating and Invoking the Hello World Extension in JIT mode

This section describes how to add a new menu item called Hello World Extension to the Add Panel menu, which prompts an alert message when clicked.

Create a folder named extensions under <ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\. For example, a typical installation path looks like: C:\Program Files\Precisely\SpectrumSpatialAnalyst\customerconfigurations\analyst\theme.
Create a file called dynamic.component.ts under the <ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\extensions folder.

Paste the following code snippet into the file:

import {Component, Input} from '@angular/core';
            import {ComponentFactoryResolver} from '@angular/core';
            import {ViewContainerRef} from '@angular/core';
            @Component({
            selector: 'hello-world-selector',
            template: `<div (click)=sayHello() class=""><img class="fillColor"
            src="../controller/theme/extensions/icon-circle.png" alt="icon-circle" height="25"            
            width="25">Hello World Extension</div>`,
            styles: [`
            .btnPosition {
            z-index: 1;
            right: 12%;
            }
            .iconContainer {
            padding: 10px;
            background-image: linear-gradient(90deg,#3e53a4,#cf0989);
            }
            .fillColor {margin: 3px; cursor:pointer;}
            `]
            })
            export class HelloWorldComponent{
            constructor() {
            }
            onInit() {
            }
            sayHello() {
            alert('Congratulations! You have successfully extended the Spectrum Spatial Analyst application.');
            }
            }

Save the following image as icon-circle.png in: <ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\extensions.
Please note that theme is an existing folder in the Spectrum Spatial Analyst installation.
Create a file called dynamic.module.ts in:<ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\extensions.

Paste the following content in that file and save it:

import {NgModule } from '@angular/core';
            import {HelloWorldComponent} from './dynamic.component.ts';
            @NgModule({
            imports: [],
            declarations: [HelloWorldComponent],
            exports: [HelloWorldComponent]
            })
            export class DynamicModule { };

Go to the customer configuration folder in: <ANALYST_INSTALL_PATH>\customerconfigurations\analyst.The path looks like C:\Program Files\Precisely\SpectrumSpatialAnalyst\customerconfigurations\analyst.
Create a file called CustomAnalystModuleConfig.json under that directory.

Paste the following content into the CustomAnalystModuleConfig.json file and save it:

{
            "modules": [{
            "name": "DynamicModule",
            "description": "Hello World Extension in the Add Panel.
            "modulePath": "extensions/dynamic.module.ts#DynamicModule",
            "components": [{
            "componentName": "HelloWorldComponent",
            "parentComponentName": "AddPanel"
            }]
            }],
            "componentsToRemove": []
            }

Open the browser and launch the Spectrum Spatial Analyst URL from the address bar.
Go to the Add panel, (+) plus button on top right corner of application, to see your first component with the above image and label Hello World Extension
Click on it to display a pop up with a success message as shown in the following image:

Creating and Invoking the Hello World Extension in JIT mode - 23.1

Spectrum Spatial Analyst Extensibility Guide