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

# Adding a component dynamically

WebMap provides a built-in mechanism to new controls during the runtime execution without having to directly modify the front-end layer of the application, however, this mechanism has some requirements that need to be met.

* The control **must not** be declared in the front-end application.
  * Its name must be unique.
* The Add container logic must be invoked outside the InitializeComponent method.
* The following properties are strictly necessary:
  * Name
  * Position (Top, Left)
  * Size (Width, Height)
* The control **must exist** in both the front-end components and the back-end models.

{% hint style="info" %}
To know the more about the currently supported front-end controls please visit this [section](/webmap/general/frontend/api-documentation/wfnetc1components.md).
{% endhint %}

### Adding a new control step by step

To be able to add a new control dynamically the following steps must be made.

**Step 1.** Adjust the current container to allocate the new control.

This process could be made in both the back-end application by directly modifying its source code or in the front-end by applying style changes. For this scenario the modification will be directly applied in the back-end application.

![Original screen](/files/5C5b1VrYz5EQE4A6OiJD)

In this case the new logic will be added into the application constructor.

```csharp
public Form1()
{
    InitializeComponent();
    this.Load += (obj, e) => this.Size = new System.Drawing.Size(this.Size.Width + 150, this.Size.Height);
}
```

The result of the code modification will be reflected into the application the next time the back-end gets compiled.

![Modified screen](/files/sS3hbQFD5TurmDp30TO7)

**Step 2.** Once the control container has been modified accordingly, it is time to add a new instance for the desired control.

For the following example a new method (CreateNewButton) will be added, this method contains the necessary logic to create a new button instance, including its required properties needed to render in the front-end.

{% hint style="info" %}
**Note:** the name property needs to be unique.
{% endhint %}

```csharp
private void newButton_Click(object sender, System.EventArgs e)
{
    /*…some logic…*/;
}

private Mobilize.Web.Button CreateNewButton()
{
    return new Mobilize.Web.Button
    {
        Size = new System.Drawing.Size(85, 25),
        Top = 10,
        Left = this.Size.Width,
        Name = "NewButton",
        Text = "New dynamic button",
        Click = new EventHandler(newButton_Click)
    };
}
```

**Step 3**. Lastly the only remaining step is to add the newly created control into the list of the current controls included in its container

```csharp
public Form1()
{
    InitializeComponent();
    this.Load += (obj, e) => this.Size = new System.Drawing.Size(this.Size.Width + 150, this.Size.Height);
    this.Controls.Add(this.CreateNewButton());
}
```

**Step 4**. Compile the back-end code and the new control should now be available to use.

![Final screen with new control](/files/sZPOdgqPTOYhXZjaIsdl)