Appendix D- Custom Template

Introduction

With SSA 12.2, you can create map information templates (which are now created as angular components) – these can be created by -
  1. Custom Template Designer- Using Template Designer to visually pick what you want and save the template. The designer will generate the code for the template.
  2. Custom Script- Writing your own template from scratch (if you are familiar with writing typescript code and creating angular components)
  3. Modifying Template -Using template designer and then changing the code one it creates.
Once a template is created - you can copy it to the \customerconfigurations\analyst\theme\infotemplatesfolder. Finally, you can map it to the table it was designed for in Admin Console in a map configuration.

The template designer is just a way to visually create a Custom Map Information Template. It lets you choose the columns from the table, add charts etc.

For more information on the template designer, refer to the section on “Using the Template Designer” in SSA User Guide.

Adding New Custom Template Component in Analyst Platform

This section describes how to write your own custom template from scratch (if you are familiar with writing typescript code and creating angular components). Please follow the steps given below:

  1. Write your module and component in same typescript file with same filename. For example, TestTemplate.ts
    1. Naming Convention for component and module (case sensitive) -
      • Make sure, the module-name should be prefixed with same name as that of file and suffixed with 'Module'. For example- TestTemplateModule
      • Also, the component-name should be prefixed with same name as that of file and suffixed with 'Component'. For example- TestTemplateComponent
    2. Simple module that exports single component could be written like:
      @NgModule({
    imports: [CommonModule],
    declarations: [TestTemplateComponent],
    exports: [TestTemplateComponent]
})
export class TestTemplateModule { };
    3. Template urls/style urls should be controller urls like 
      @Component({
    selector: 'test-template',
    templateUrl: '../controller/theme/infotemplates/testTemplate.html',
    styleUrls: ['../controller/theme/infotemplates/testTemplate.css']
})
    4. Analyst platform will pass context data object in custom component that have feature attribute data along with some additional data. 
       data = {
  feature: { [name: string]: CalloutFeatureColumnObject };
  infoSource?: GeoJSONFeature; // Could be a point(callout) or an annotation(mapinformation).
    namedTableRef: string;  // namedTable that is representing that layer
}

      You need to declare following input with fixed name 'data'.

      class TestTemplateComponent {
    @Input() data: any;
}
      Note: Refer API-DOC for 'LayerInfoFeatureTemplateData' type to see the structure of this 'data' object
    5. Feature attributes value and type could be accessed in your template by using data.feature[<attributeName>].value and data.feature[<attributeName>].type
      <strong>{{ data.feature["URL"].name }}</strong>:
<a target="_blank" href="{{ data.feature[URL].value }}">
  <img src="{{ data.feature.URL.value }}" />
</a>
      If you get feature attribute name in variable name ‘key’ then 
      <div *ngIf="data.feature[key].type === 'image' then imageBlock else  defaultBlock">
    </div>    
<ng-template #imageBlock>
<strong>{{ data.feature[key].name }}</strong>:
      <a target="_blank" href="{{ data.feature[key].value }}">
          <img src="{{ data.feature[key].value }}" />
      </a>
</ng-template>    
<ng-template #defaultBlock>
     <strong>{{ data.feature[key].name }}</strong>: {{ data.feature[key].value }}
</ng-template>
  2. Once a template component typescript (.ts) file and dependent html/css files are created, you can copy them to the \customerconfigurations\analyst\theme\infotemplates folder.
  3. Finally, you can map it to the table in map configuration in the Admin Console.
    1. Go to adminconsole application and click ‘Map Configs’ tab.
    2. Select desired mapconfig from the dropdown.
    3. Select ‘Template Mappings’ tab under mapconfigs view.
    4. Under the Map Information Template column, the custom designed template component will be listed in dropdowns. Select custom component for desired table listed under Tables column and click save.