Spectrum Spatial (SSA/LIM)

 View Only
Expand all | Collapse all

How moving SSA Map Information Custom Templates to the new format for SSA release 12.2 or after?

  • 1.  How moving SSA Map Information Custom Templates to the new format for SSA release 12.2 or after?

    Posted 07-08-2018 13:20
      |   view attached

    Answer: SSA 12.2 new release uses new simple Map Information Custom Templates with Angular 4/TypeScript. Now the Admin users can create Map Information Custom Templates using the new “Template Designer” tool in SSA: adding list of data with icons, custom text, Pie/Bar Chart, Street View to the Custom Templates without writing codes.

    In case of you need to move the SSA pre 12.2 release templates to the new ones for SSA release 12.2 or 12.2.1 – please – have a look at the information in this presentation.

    Don’t hesitate - please - to ask questions for details or contact us for support.

     

    Stores KPI Custom template sample in SSA

     

    See Attachment

     

     



  • 2.  RE: How moving SSA Map Information Custom Templates to the new format for SSA release 12.2 or after?

    Posted 07-12-2018 02:21

    Great post @Monica Di Martino? 

    I have a couple of extra comments/tips to add from my learnings converting templates.

    By adding the following snippet to your Component (in the .ts file) you will be able to continue using {{feature.column.value}} in your templates.

    ngOnInit() {

    this.feature = this.data.feature;

    }

    Docs can be found here. https://v4.angular.io/api/core/OnInit

    Logic that was previously in an “ng-init” directive in your templates should also go into the ngOnInit function.

    “ng-show” and “ng-hide” do not have equivalent directive in angular so these will need to be changed to use *ngIf. e.g.

    Before:

    <div ng-show=”feature.col.value > 0”>{{feature.col.value}}</div>

    After:

    <div *ngIf =”feature.col.value > 0”>{{feature.col.value}}</div>

    For ng-hide you will need to switch your Boolean logic

    Before:

    <div ng-hide=”feature.col.value == 0”>{{feature.col.value}}</div>

    After:

    <div *ngIf =”feature.col.value != 0”>{{feature.col.value}}</div>

     

    Unlike ng-if and ng-for in previous versions, *ngIf and *ngFor cannot be used on the same tag as they are what is known as structural directives in angular (https://v4.angular.io/guide/structural-directives). To convert the template you will need to add the ngIf on a tag inside the for loop or filter the list in the Component .ts.