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

Spectrum Spatial Analyst Extensibility Guide

Product type
Software
Portfolio
Locate
Product family
Spectrum
Product
Spectrum > Spatial > Spectrum Spatial Analyst
Version
23.1
Language
English
Product name
Spectrum Spatial Analyst
Title
Spectrum Spatial Analyst Extensibility Guide
Topic type
Reference
Overview
Tips
How Do I
Configuration
First publish date
2007

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';
                @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.');
                }
                }
  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';
                @NgModule({
                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: