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.