Creating and Invoking the Hello World Extension in AOT mode - spectrum_spatial_analyst_1

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, OnInit } from '@angular/core';

@Component({
    selector: 'hello-world-selector',
    template: `<div (click)=sayHello() class=""><img class="fillColor"
            src="../controller/theme/extensions/icon-puzzle.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 implements OnInit {
    constructor()

{     }
    ngOnInit(): void {     }
    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 AOT mode - spectrum_spatial_analyst_1 - Latest

Spectrum Spatial Analyst Extensibility Guide