> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/webforms/extend-or-modify-the-converted-application/adding-masterpage.md).

# 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 [<mark style="color:red;">new component</mark> ](https://angular.io/cli/generate#component)and modify it with the elements you want to show.

Necessary elements for a master page to work properly:

**NewMasterPage.html**&#x20;

```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**

```typescript
@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**

```typescript
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**

```typescript
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.

```csharp
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](/files/QvAV0NrXwtV05ll9k9yg)

#### 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.