# 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 () 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) --- # 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-items-to-existing-toolbar.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.