Adding MasterPage

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

Frontend

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

Necessary elements for a master page to work properly:

NewMasterPage.html

<div *ngIf='model' class='NestedMasterPage'>
    <ng-template #head let-model='model'>
       <ng-container [ngTemplateOutlet]="head_content" [ngTemplateOutletContext]="{model: childModel}">
       </ng-container>
 
    </ng-template>
    <ng-template #ContentPlaceHolder1 let-model='model'>
       <h1>New Master</h1>
       <ng-container [ngTemplateOutlet]="ContentPlaceHolder1_content" [ngTemplateOutletContext]="{model: childModel}">
       </ng-container>
    </ng-template>
    
    <wm-container>
    </wm-container>
 
 </div>

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

NewMasterPage.ts

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

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

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

  ContentPlaceHolder1_content : TemplateRef <any>;
  head_content : TemplateRef <any>;
  
  constructor (wmservice : WebMapService,changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef,pagesRendererService : PagesRendererService) {
     super(wmservice,changeDetector,render2,elem,pagesRendererService);
  }
  
  initializeContainers (page) {
     super.initializeContainers(page);
     this.ContentPlaceHolder1_content = page.ContentPlaceHolder1;
     this.head_content = page.head;
  }
}

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) + NewMasterPage (name of the new page). The new master page component needs to extend from the base MasterPageComponent. You need the references to the head and the content, using Angular's ViewChild. Finally, you need the head and content TemplateRef properties, to set the content from a page.

Note: In the previous example, the MasterPage we are adding is inside another MasterPage, that is why we have the ViewChild references and we also set the initializeContainers from a page.

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';

import { NewMasterComponent } from './new-master/new-master.component';

export { Site1MasterComponent };
export { SummaryPageComponent };
export { NewPageComponent };

export { NewMasterComponent };

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,
    MyProject.NewMasterComponent,
  ],
  declarations: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
    MyProject.NewMasterComponent,
  ],
  bootstrap: [
    MyProject.Site1MasterComponent,
    MyProject.SummaryPageComponent,
    MyProject.NewPageComponent,
    MyProject.NewMasterComponent,
  ],
   providers: [WebMapService],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class OtherValidatorsModule { }

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

Backend

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

In the NewMasterPage.designer.cs file you just have to set the MasterPageFile property correctly.

namespace ProjectName
{
    public partial class NewMaster
   {

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

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

As mentioned before, the master page we are adding is a "NestedMasterPage", so it has a MasterPage as its MasterPageFile and the new pages will have the new NestedMasterPage as its MasterPageFile.

MasterPage structure example

Redirect

To go to the new master page you need to add the NewMaster reference to a new or existing Page, using the MasterPageFile property, this way the mechanism will load both the Page and the MasterPage properly.