> 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/winforms/extend-or-modify-the-converted-application/adding-a-component.md).

# Adding a component

Say you have to work on the following user story:

As a user, when I navigate the startup page of [<mark style="color:red;">HelloWorld</mark>](https://github.com/MobilizeNet/WFNetHelloWorld/tree/master/ConvertedCode/HelloWorld), I want to be able to click on a Button with the text 'Spanish', and the Label's text should be changed to 'Hola Mundo'. Finally, the screen should look like the following image:

![HelloWorld with translate button](/files/-MlHObxInIV4kngfF4-2)

#### Business Logic

In order to complete this user story, you have to add some lines of code on the business logic and UI. Let's start with the logic first.

Open the **Form1.Designer.cs** file. and declare the new button.

```csharp
[Intercepted]
private Mobilize.Web.Button button2 { get; set; }
```

{% hint style="info" %}
**Note:** Remember to add the Intercepted attribute in order to let the properties state persist over a request. Only the properties with the Intercepted attribute will be sent to the user interface.
{% endhint %}

In the same file, instantiate the button within the method `InitializeComponents`.

```csharp
//
// button2
//
this.button2 = new Mobilize.Web.Button();
this.button2.Font = new Mobilize.Web.Font("Arial", 14.25F, Mobilize.Web.FontStyle.Regular, Mobilize.Web.GraphicsUnit.Point, ((byte)(0)));
this.button2.Location = new System.Drawing.Point(134, 78);
this.button2.Name = "button2";
this.button2.Text = "Spanish";
```

&#x20;Next to the last lines, subscribe click event to the `button2`.

```csharp
this.button2.Click += new System.EventHandler(this.button2_Click);
```

&#x20;Then, open the `Form1.cs` file and add a method called `button2_Click` and any functionality you want to do when someone clicks the `button2`. Following our user story, it will change the text of the label to Spanish.

```csharp
private void button2_Click(object sender, System.EventArgs e)
{
    this.label1.Text = "Hola Mundo";
}
```

Now the remaining changes are related to the UI components.

#### User interface

Enter the helloworld-angular\src\app\components\hello-world\form1 folder, open the file **form1.component.html** and add  the `wm-button` tag of the `button2`.

```markup
<div *ngIf="model">
    <wm-window [model]="model" id="Form1" class="HelloWorld_Form1">
        <ng-template let-model>
            <div class="Form1">
                <wm-label id="label1" [model]="model.label1" class="label1" tabindex="2">My First Sample</wm-label>
                <wm-button id="button1" [model]="model.button1" class="button1" tabindex="1"></wm-button>
				        <wm-button id="button2" class="button2" [model]="model.button2"></wm-button>
            </div>
        </ng-template>
    </wm-window>
</div>
```

In the same folder, open the file **form1.component.css**  and add the styles you wish for the class or id set as `button2` previously.

```css
.HelloWorld_Form1 .button2 {
    font-family: "Arial";
    font-size: 17.1px;
    left: 134px;
    top: 78px;
    position: absolute;
    width: 116px;
    height: 50px;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
```

Finally build both, the business logic and UI code, and run the application.

The petition was completed and now we have our modified WebMAP: WinForms to Web app!

![](/files/ZR0dTKmHcmy5ydjkBhmH)