Spectrum Spatial (SSA/LIM)

 View Only

  • 1.  Using a script to amend a string in a SSA custom template

    Posted 09-08-2022 06:51
    Hello All,

    I have set up a custom template for a named table in SSA.  This has a column (REGISTD) of character datatype which stores a date as "yyyyddmm" .  I would like to be able to reformat the output in the custom template that I have set up to show the date as "dd-mm-yyyy".  

    I was planning to reformat using regular expressions 
    var s ={data.feature.REGISTD.value}
    s = s.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')

    I am not sure where to add the script in the html or ts file to get this to work.  Would anyone be able advise please?

    Best Regards

    Andrew

    Custom template files are below.
    (Note, some amendments were previously made to the custom templates to enable the use of collapsible buttons).  

    ts file

    import { Component, NgModule, Input} from '@angular/core'
    import { CommonModule } from '@angular/common';
    import { PbTdCustomTemplateModule } from '../templatecomponents/pb-td-custom-template.module.ts';
    import { AccordionModule } from 'ngx-bootstrap';
    import { CollapseModule } from 'ngx-bootstrap';

    @Component({
    selector: "pb-info-LCRegistrationsCustTemp",
    templateUrl: '../controller/theme/infotemplates/LCRegistrationsCustTemp.html',
    styleUrls: []
    })

    export class LCRegistrationsCustTempComponent{

    @Input() data;

    readonly column_S86CbConfig = {
    "name": "EXTRALARGEPLAN",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_S86Cb",
    "showAs": "Text",
    "label": "Extra Large Plan"
    };
    readonly column_gjzMQConfig = {
    "name": "REGISTD",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_gjzMQ",
    "showAs": "Text",
    "label": "Date Registered"
    };
    readonly column_TuVx7Config = {
    "name": "DOCUMENT",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_TuVx7",
    "showAs": "Text",
    "label": "Document"
    };
    readonly column_qEQ3eConfig = {
    "name": "DIGITISED",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_qEQ3e",
    "showAs": "Text",
    "label": "Digitised"
    };
    readonly column_jRGtmConfig = {
    "name": "REGISTER_ENTRY",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_jRGtm",
    "showAs": "Text",
    "label": "Register Entry"
    };
    readonly column_DOtQSConfig = {
    "name": "ID",
    "type": "String",
    "selected": true,
    "elementType": "Column",
    "showLabel": true,
    "showIcon": false,
    "icon": "pbi-mail",
    "labelPosition": "inline",
    "id": "column_DOtQS",
    "imageDisplayType": "flexible",
    "isHideNull": false,
    "showAs": "Text"
    };

    constructor() {}
    }

    @NgModule({
    imports: [CommonModule,AccordionModule, PbTdCustomTemplateModule,CollapseModule],
    declarations: [LCRegistrationsCustTempComponent ],
    exports: [LCRegistrationsCustTempComponent]
    })

    export class LCRegistrationsCustTempModule{ };

    html file
    <div style="width: 100%; overflow:auto;">
    <div style="float:left; width:100%; text-align:center; padding-left:4%; padding-right:2%">
    <button type="button" class="btn btn-primary btn-sm btn-block" (click)="isCollapsed = !isCollapsed"
    [attr.aria-expanded]="!isCollapsed" aria-controls="collapseLCReg">
    <b>ID: {{data.feature.ID.value}}</b>
    </button>
    </div>
    </div>
    <div id="collapseLCReg" [collapse]="!isCollapsed">
    <div>
    <pb-info-column [columnConfig]="column_DOtQSConfig" [feature]="data.feature" class="multilabelrow col-12 default-topbtm-padding">
    </pb-info-column>
    <pb-info-column [columnConfig]="column_gjzMQConfig" [feature]="data.feature" class="multilabelrow col-12 default-topbtm-padding">
    </pb-info-column>
    <pb-info-column [columnConfig]="column_qEQ3eConfig" [feature]="data.feature" class="multilabelrow col-12 default-topbtm-padding">
    </pb-info-column>
    <pb-info-column [columnConfig]="column_S86CbConfig" [feature]="data.feature" class="multilabelrow col-12 default-topbtm-padding">
    </pb-info-column>
    <div class = "multilabelrow col-xs-12 default-topbtm-padding">
    <a href ="{{data.feature.REGISTER_ENTRY.value}}" target="_blank">Register Entry link</a>
    </div>
    <div class = "multilabelrow col-xs-12 default-topbtm-padding">
    <a href ="{{data.feature.DOCUMENT.value}}" target="_blank">Document link</a>
    </div>
    </div>
    </div>

    ------------------------------
    Andrew Patterson
    Hoople Ltd
    Hereford
    ------------------------------


  • 2.  RE: Using a script to amend a string in a SSA custom template

    Posted 09-26-2022 03:10
    Edited by Duri Bradshaw 09-26-2022 03:10
    Hi Andrew,

    You might be best to try replacing the value of REGISTD with your formatted data rather than creating a new variable which will then need to be added to the HTML template.

    I haven't tested any of this but I would use the OnInit function which would require something like:

    Add OnInit to your angular/core import
    import { Component, NgModule, Input, OnInit} from '@angular/core'

    Set your class to implement OnInit
    export class LCRegistrationsCustTempComponent implements OnInit {

    Then after your constructor add the ngOnInit function with your formatting code
      constructor() {}
      ngOnInit() {
        this.data.feature.REGISTD.value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3');
      }
    }

    or you could just put the code directly in the constructor which would probably work but may not be technicality correct

      constructor() {
        this.data.feature.REGISTD.value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3');
      }
    }


    ------------------------------
    Duri Bradshaw
    Spatial IT Consultant
    Insight GIS
    ------------------------------

    Original Message