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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/webforms/extend-or-modify-the-converted-application/adding-masterpage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.