# Adding a component
Say you have to work on the following user story:
As a user, when I navigate the startup page of [HelloWorld](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:
#### 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";
```
Next to the last lines, subscribe click event to the `button2`.
```csharp
this.button2.Click += new System.EventHandler(this.button2_Click);
```
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
```
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!
---
# 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-a-component.md?ask=
```
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.