> 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-new-items-to-existing-toolbar.md).

# Adding new items to existing toolbar

This section will show you how to add new items to converted tool strip control.  To start we will be using a form named **Form1** that already contains a toolstrip control named **toolStrip1** which already contains two items named **toolStripLabel1 and toolStripLabel2**.

![Original migrated application](/files/pSbh9xQXdTH7erJX9Cfk)

### Case 1: Adding a new label item

First step is to declare a new field for the model in the converted form, this new field will be named **toolStripLabel3** of the type **Mobilize.Web.ToolStripLabel.**

```csharp
 [Intercepted]
 private Mobilize.Web.ToolStripLabel toolStripLabel3 { get; set; }
```

Then initialize the new field in the **InitializeComponent** method in the **Form1.Designer.cs.**

```csharp
private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel3 = new Mobilize.Web.ToolStripLabel();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}
```

Then set the properties of the new field.

```csharp
// 
// toolStripLabel3
// 
this.toolStripLabel3.Name = "toolStripLabel3";
this.toolStripLabel3.Size = new System.Drawing.Size(86, 22);
this.toolStripLabel3.Text = "toolStripLabel3";
```

Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, by calling the Add method.

```csharp
this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
this.toolStripLabel1,
this.toolStripLabel2,
this.toolStripLabel3
});
```

Finally, in the migrated frontend angular project, add a css rule in the form1.component.css file that matches the newly added item to the toolstrip.

```css
.WindowsFormsApp1_Form1 .toolStripLabel3 {
    width: 86px;
    height: 22px;
    position: absolute;
    left: 144px;
}
```

Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.

![Application with the new toolstrip item](/files/3H3zq5OQPKmlAMm2qaeo)

### Case 2: Adding a new button item

First step is to declare a new field for the model in the converted form, this new field will be named **toolStripButton** of the type **Mobilize.Web.ToolStripButton.**

```csharp
[Intercepted]
private Mobilize.Web.ToolStripButton toolStripButton { get; set; }
```

Then, add the initialization of the item in the **InitializeComponent** method in the **Form1.Designer.cs.**

```csharp
private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.toolStripButton = new Mobilize.Web.ToolStripButton();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}
```

Set the properties of the new ToolStripButton control. If the DisplayStyle (<https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.toolstripitem.displaystyle>) of the item is set as Image or ImageAndText a valid Image value should be set. The Image property must be a string that represents a valid url to an image, in our case the image will be located in the assets/images folder of the migrated Angular app.

```csharp
// 
            // SaveToolStripButton
            // 
            this.toolStripButton.Alignment = Mobilize.Web.ToolStripItemAlignment.Right;
            this.toolStripButton.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;
            this.toolStripButton.Image = "assets/images/HSTClientCommon.Resources.update_item_16x16.png";
            this.toolStripButton.Name = "SaveToolStripButton";
            this.toolStripButton.Size = new System.Drawing.Size(55, 22);
            this.toolStripButton.Text = "&Save";
            this.toolStripButton.Click += new System.EventHandler(this.toolStripButton_Click);
```

Also, notice the Click handler, a valid method should be created in order to set the Click handler value correctly. The method **toolStripButton\_Click** definition must be added as well.

```csharp
private void toolStripButton_Click(object sender, EventArgs e)
{
 MessageBox.Show("Hello world!");
}
```

Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, you can add a new Add call.

```csharp
this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
this.toolStripLabel1,
this.toolStripLabel2,
this.toolStripButton
});
```

Finally, in the migrated frontend angular project, add a css rule in the form1.component.css file that matches the newly added item to the toolstrip.

```css
.WindowsFormsApp1_Form1 img[title="Save"] {
    position: absolute;
    left: 144px;
    top: -5px;
}
```

Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.

![](/files/GxyRhLgw0J5EP0XRvgh7)

### Case3: Adding  a new submenu with child items

First step is to declare the following new model fields in the converted form:

* The parent menu item, this new field will be named **SchedulingMenuItem** of the type **Mobilize.Web.ToolStripMenuItem.**
* The child menu item, this new field will be named **appointmentSheetToolStripMenuItem** of the type **Mobilize.Web.ToolStripMenuItem.**

```csharp
[Intercepted]
internal Mobilize.Web.ToolStripMenuItem SchedulingMenuItem { get; set; }

[Intercepted]
private Mobilize.Web.ToolStripMenuItem appointmentSheetToolStripMenuItem { get; set; }
```

Then, add the initialization of the items in the **InitializeComponent** method in the **Form1.Designer.cs.**

```csharp
private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.SchedulingMenuItem = new Mobilize.Web.ToolStripMenuItem();
  this.appointmentSheetToolStripMenuItem = new Mobilize.Web.ToolStripMenuItem();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}
```

Set the properties of the new ToolStripMenuItems control. Please notice that in the case of the parent menuItem, it adds to its DropDownItems property the child menuItem.

```csharp
// 
// SchedulingMenuItem
// 
this.SchedulingMenuItem.DropDownItems.AddRange(new Mobilize.Web.ToolStripItem[] {
this.appointmentSheetToolStripMenuItem});
this.SchedulingMenuItem.Name = "SchedulingMenuItem";
this.SchedulingMenuItem.Size = new System.Drawing.Size(78, 20);
this.SchedulingMenuItem.Text = "&Scheduling";
// 
// appointmentSheetToolStripMenuItem
// 
this.appointmentSheetToolStripMenuItem.Name = "appointmentSheetToolStripMenuItem";
this.appointmentSheetToolStripMenuItem.Size = new System.Drawing.Size(254, 22);
this.appointmentSheetToolStripMenuItem.Text = "Appointment Sheet";
this.appointmentSheetToolStripMenuItem.Click += new System.EventHandler(this.appointmentSheetToolStripMenuItem_Click);
```

Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, you can add a new Add call.

```csharp
this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
 this.SchedulingMenuItem,
 this.toolStripLabel1,
 this.toolStripLabel2
});
```

Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.

![](/files/6Vgc0UZvEuAbZtzAILJ4)