# Adding new window

Say you have to work on the following user story:

As a user, when I navigate to the startup page of [*HelloWorld*](https://github.com/MobilizeNet/WFNetHelloWorld/tree/master/MigratedCode/HelloWorld1), I want to be able to click on a button with the text 'Login', after I click the button, a *Login* screen should be shown.

#### Business Logic

The procedure to create the new button Login, to display the new window, is exactly the same as in the section "Add Component", the only thing that differs is the business logic of the button's`click` event.

Open **Form1.Designer.cs** file and subscribe the click event to the `button3`.

```csharp
this.button3.Click += new System.EventHandler(this.button3_Click);
```

Then, open the **Form1.cs** file, add a method called `button3_Click` as the following:

```csharp
private void button3_Click(object sender, System.EventArgs e)
{
  var loginForm = new Form2();
  loginForm.ShowDialog();
}
```

Create a class call **Form2.cs,** add the`Observable`attribute, to the class in order to keep the class within the WebMAP's life cycle, and make the class extend from `Mobilize.Web.Form` in order to inherit all the necessary properties and functionalities that are needed in any new screen.

```csharp
using Mobilize.WebMap.Common.Attributes;

namespace HelloWorld
{
    [Observable]
    public partial class Form2 : Mobilize.Web.Form
    {
        public Form2()
        {
            this.InitializeComponent();
        }
    }
}
```

Then, create the partial class **Form2.Designer.cs**.

```csharp
using Mobilize.WebMap.Common.Attributes;

namespace HelloWorld
{
    public partial class Form2
    {
        [Mobilize.WebMap.Common.Attributes.Designer]
        private void InitializeComponent()
        {
            this.textBox1 = new Mobilize.Web.TextBox();
            this.textBox2 = new Mobilize.Web.TextBox();
            this.label1 = new Mobilize.Web.Label();
            this.label2 = new Mobilize.Web.Label();
            this.label3 = new Mobilize.Web.Label();
            this.button1 = new Mobilize.Web.Button();
            this.panel1 = new Mobilize.Web.Panel();
           
            this.textBox1.Name = "textBox1";
            this.textBox2.Name = "textBox2";
            this.label1.Name = "label1";
            this.label1.Text = "Username";
            this.label2.Name = "label2";
            this.label2.Text = "Password";
            this.label3.Name = "label3";
            this.label3.Text = "Login";
            this.button1.Name = "button1";
            this.button1.Text = "Login";
            this.panel1.Controls.Add(this.textBox2);
            this.panel1.Controls.Add(this.label2);
            this.panel1.Controls.Add(this.textBox1);
            this.panel1.Controls.Add(this.button1);
            this.panel1.Controls.Add(this.label1);
            this.panel1.Name = "panel1";
            this.Controls.Add(this.label3);
            this.Controls.Add(this.panel1);
            this.Name = "HelloWorld.Form2";
            this.Text = "Form2";
        }

        [Intercepted]
        private Mobilize.Web.TextBox textBox1 { get; set; }
        [Intercepted]
        private Mobilize.Web.TextBox textBox2 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label1 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label2 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label3 { get; set; }
        [Intercepted]
        private Mobilize.Web.Button button1 { get; set; }
        [Intercepted]
        private Mobilize.Web.Panel panel1 { get; set; }
    }
}
```

#### User interface

Create a new folder for Form2 that will contain the typescript angular component, the HTML and the CSS for the form. The folder structure would be as below:

* helloworld-angular
  * src
    * app
      * components
        * hello-world
          * Form1
            * ...
          * **Form2**
            * ...

In the Form2 folder, create the angular typescript component **form2.component.ts**:

```javascript
import { Component, ChangeDetectorRef, ElementRef, Output, Renderer2, ViewEncapsulation} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";

@Component({
    selector: "hello-world-form2",
    styleUrls: ["./form2.component.css"],
    templateUrl: "./form2.component.html",
    encapsulation: ViewEncapsulation.None
})
@dataTransfer(["frmHelloWorldForm2"])
export class Form2Component extends FormComponent {
    protected webServices : WebMapService;

    constructor (wmservice : WebMapService, changeDetector : ChangeDetectorRef, render2 : Renderer2, elem : ElementRef) {
        super(wmservice, changeDetector, render2, elem);
    }
}
```

Every newly created component should import the following modules:

1. `FormComponent`: import this if you want to inherit the properties and functionalities of any screen.
2. [`WebMAPService`](https://mobilizedocs.azurewebsites.net/frontend/docs/angular/webmapservice.html): import this for delta synchronization and sending requests to WebMAP Back-end.
3. [`dataTransfer`](https://mobilizedocs.azurewebsites.net/frontend/guides/guideDynamicControls.html): import this for registering the types of components that are going to be displayed dynamically.

In the same folder, create the HTML file **form2.component.html,** this will helps us to bind with the new components of the **Form2.cs** class. The standard to create any new HTML screen is:

```markup
<div *ngIf="model">
  <wm-window [model]="model" id="..." class="...">
    <ng-template let-model>
      ...
    </ng-template>
  </wm-window>
</div>
```

`wm-window` is a Mobilize Front-end generic component for supporting the `System.Widows.Forms`. &#x20;

Now, add the HTML tags `wm-label`, `wm-button`, `wm-textbox`, `wm-panel`.

```markup
<div *ngIf="model">
    <wm-window [model]="model" id="Form2" class="HelloWorld_Form2">
        <ng-template let-model>
        <div class="Form2">
            <wm-label id="label3" tabindex="11" class="label3" [model]="model.label3">Login</wm-label>
            <wm-panel id="panel1" class="panel1" [model]="model.panel1">
                <wm-label id="label1" tabindex="5" class="label1" [model]="model.label1">Username</wm-label>    
                <wm-textbox id="textBox1" tabindex="3" class="textBox1" [model]="model.textBox1"></wm-textbox>    
                <wm-label id="label2" tabindex="8" class="label2" [model]="model.label2">Password</wm-label>
                <wm-textbox id="textBox2" tabindex="5" class="textBox2" [model]="model.textBox2"></wm-textbox>
                <wm-button id="button1" tabindex="2" class="button1" [model]="model.button1"></wm-button>
            </wm-panel>
        </div>
      </ng-template>
    </wm-window>
</div>
```

{% hint style="info" %}
&#x20;**NOTE:** You can add any other HTML tags here to extend functionalities as you want. Remember you will need to bind them with some angular component.
{% endhint %}

&#x20;In the Form2 folder, create a HTML file **form2.component.css**.

```css
.HelloWorld_Form2 {
    left: -1px;
    top: -1px;
  }
  .HelloWorld_Form2 .Form2 {
    width: 330px;
    height: 178px;
    overflow: hidden;
  }
  .HelloWorld_Form2 .label3 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Arial";
    font-size: 26.1px;
    font-weight: bold;
    left: 125px;
    top: 9px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .panel1 {
    background-color: rgba(153, 180, 209, 1);
    left: 12px;
    top: 51px;
    position: absolute;
    width: 306px;
    height: 115px;
    overflow: hidden;
  }
  .HelloWorld_Form2 .label1 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Microsoft Sans Serif";
    font-size: 14.4px;
    left: 7px;
    top: 14px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .textBox1 {
    left: 109px;
    top: 16px;
    position: absolute;
    width: 177px;
    height: 20px;
  }
  .HelloWorld_Form2 .label2 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Microsoft Sans Serif";
    font-size: 14.4px;
    left: 7px;
    top: 45px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .textBox2 {
    left: 109px;
    top: 47px;
    position: absolute;
    width: 177px;
    height: 20px;
  }
  .HelloWorld_Form2 .button1 {
    color: black;
    font-family: "Microsoft Sans Serif";
    font-size: 17.1px;
    left: 11px;
    top: 73px;
    position: absolute;
    width: 275px;
    height: 36px;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
  }
  .HelloWorld_Form2 .button1:active {
    background-color:DarkBlue;
    color:white;
  }
```

To export the new component, please modify the following files:

1. index.ts
2. hello-world.module.ts

Also in the helloworld-angular folder, find the **index.ts** file and ad&#x64;**:**&#x20;

```javascript
//...
import { Form2Component } from './form2/form2.component';
//...
export { Form2Component };
```

For the **hello-world.module.ts** file add:

```javascript
//...

@NgModule({
  imports: [
    //...
  ],
  exports: [
    //...
    HelloWorld.Form2Component,
  ],
  declarations: [
    //...
    HelloWorld.Form2Component
  ],
  bootstrap: [
    //...
    HelloWorld.Form2Component,
  ],
   providers: [WebMapService],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class HelloWorldModule { }
```

Build both, the business logic and UI code, and run the application

![HelloWorld with login](/files/oaxRu1ny1RudUuxPIEfI)

![Login window](/files/34cqhUN8oNb7aa0LtaX3)


---

# 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/winforms/extend-or-modify-the-converted-application/adding-new-window.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.