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

Spectrum Spatial Analyst Extensibility Guide

Product type
Product family
Spectrum > Spatial > Spectrum Spatial Analyst
Product name
Spectrum Spatial Analyst
Spectrum Spatial Analyst Extensibility Guide
Topic type
How Do I
First publish date

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.

  1. 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.
  2. Create a file called dynamic.component.ts under the <ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\extensions folder.
  3. Paste the following code snippet into the file:
    import {Component, Input} from '@angular/core';
                import {ComponentFactoryResolver} from '@angular/core';
                import {ViewContainerRef} from '@angular/core';
                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.');
  4. 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.

  5. Create a file called dynamic.module.ts in:<ANALYST_INSTALL_PATH>\customerconfigurations\analyst\theme\extensions.
  6. Paste the following content in that file and save it:
    import {NgModule } from '@angular/core';
                import {HelloWorldComponent} from './dynamic.component.ts';
                imports: [],
                declarations: [HelloWorldComponent],
                exports: [HelloWorldComponent]
                export class DynamicModule { };
  7. Go to the customer configuration folder in: <ANALYST_INSTALL_PATH>\customerconfigurations\analyst.The path looks like C:\Program Files\Precisely\SpectrumSpatialAnalyst\customerconfigurations\analyst.
  8. Create a file called CustomAnalystModuleConfig.json under that directory.
  9. 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": []
  10. Open the browser and launch the Spectrum Spatial Analyst URL from the address bar.
  11. 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
  12. Click on it to display a pop up with a success message as shown in the following image: