> 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-page.md).

# 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 [<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 page to work properly:

**NewPage.html**&#x20;

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

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

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

export { Site1MasterComponent };
export { SummaryPageComponent };

export { NewPageComponent };
```

**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,
  ],
  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.

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

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

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

**PreviousPage.designer.cs**

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

**PreviousPage.cs**

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.