Adding Page

You can add new pages to a migrated application, you have to create a new page in the Frontend and the Backend.

Frontend

For the Frontend, you can easily copy and paste an existing page or generate a new component and modify it with the elements you want to show.

Necessary elements for a page to work properly:

NewPage.html

<div *ngIf='model' class='myClass'>
    <ng-template #head let-model='model'>
    </ng-template>

    <ng-template #ContentPlaceHolder1 let-model='model'>
        <h1>
            <b>
                New Page Component
            </b>
        </h1>         
    </ng-template>
 </div>html

Make sure you have a header and a content section, you have to add a template variable for this (#head and #ContentPlaceHolder1).

NewPage.ts

@Component({
  selector: 'app-new-page',
  templateUrl: './new-page.component.html',
  styleUrls: ['./new-page.component.css'],
  encapsulation : ViewEncapsulation.None
})
@dataTransfer(["frmPROJECTNAMENewPage"])
export class NewPageComponent extends PageComponent {

  @ViewChild('ContentPlaceHolder1')
  ContentPlaceHolder1 : TemplateRef <any>;

  @ViewChild('head')
  head : TemplateRef <any>;

  constructor (wmservice : WebMapService,changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
     super(wmservice,changeDetector,render2,elem);
  }
}

Make sure the class has the @dataTransfer set with the correct id for the project. In this case, the name is frmPROJECTNAME (base project name) + NewPage (name of the new page). The new page component needs to extend from the base PageComponent You also need the references to the head and the content, using Angular's ViewChild.

index.ts

import { Site1MasterComponent } from './site1-master/site1-master.component';
import { SummaryPageComponent } from './validation-summary-page/validation-summary-page.component';

import { NewPageComponent } from './new-page/new-page.component';

export { Site1MasterComponent };
export { SummaryPageComponent };

export { NewPageComponent };

project.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaseComponentsModule } from '@mobilize/base-components';
import { WebMapKendoModule } from '@mobilize/winforms-components';
import { WebMapService, WebMapModule } from '@mobilize/angularclient';
import { WebFormsModule } from '@mobilize/webforms-components';
import { AjaxModule } from '@mobilize/webforms-components';
import * as MyProject from './components/project';

@NgModule({
  imports: [
    CommonModule,
    BaseComponentsModule,
    WebMapKendoModule,
    WebMapModule,
    WebFormsModule,
    AjaxModule,
  ],
  exports: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
  declarations: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
  bootstrap: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
  ],
   providers: [WebMapService],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class OtherValidatorsModule { }

Finally, you need to add the page in the project index and then in the module.

Backend

In the Backend, you can also copy and paste an existing page and modify it with the necessary properties you need for the controls you added.

In the Page.designer.cs file you just have to set the correct MasterPageFile.

namespace ProjectName
{
    public partial class NewPage
   {

      public NewPage()
      {
         this.InitializeComponent();
      }

      private void InitializeComponent()
      {
         this.MasterPageFile = "ProjectName.MasterPageSite1";
         this.Name = "NewPage";
         
         // properties initialization
      }
   }
}

Redirect

To go to the new page you can add a wm-alink component in the Frontend with the correct target name.

<wm-alink [Target]="'ProjectName.NewPage'" [model]="model">
   New Page
</wm-alink>

Or you can also add a regular wm-link-button and handle the redirect in the Backend.

PreviousPage.html

<wm-link-button id="linkbutton1" class="linkbutton" [model]="model.linkbutton1">
</wm-link-button>

PreviousPage.designer.cs

private void InitializeComponent()
{
    this.linkbutton1.Click += new System.EventHandler(this.btnClick);
}

PreviousPage.cs

protected void btnClick(object sender, EventArgs e)
{
    try
    {
        Response.Redirect("ProjectName.NewPage", true);
    }
    catch (Exception ex) { }
}