How to add a new component in a migrated application

Once you successfully migrate your winforms application using WebMap's migration tool, and you want to add a new control to a migrated form to perform a new task, you need to follow the steps described in this guide.

1. Find the form that you want to modify

The migrated forms are located inside the app folder.

The forms are composed of three different files, the css, the html and the typescript file. We need to modify all those files to add a new control to the form.

2. Set the control's location and style

The first step that it is required to add a new control to a form is to modify the generated html and stylesheet to set the location and the style of the new control.

The first thing to note is that the migrated application is like any other standard angular application, so any component that is available for angular its available for migrated application too.

WebMap's migrated application use the Kendo for Angular Components

Lets modify the demo application to add a simple distance converter from miles to kilometers.

Then we need to add two textboxes a button and a couple of labels.

First modify the generated html to add the required controls:

As you can see we use standard html controls instead of the WebMap components because the functionality of this demo is not required to be performed in the back end.

Then we add some modifications to the stylesheet to make our converter look just the way we want.

3. Add Bindings and functionality

After setting up the GUI it is required to add a click event binding to the convert button in order to perform the desired calculation. And the Angular's ngModel binding to get and set the values from the textboxes.

In the typescript file we need to include the properties declaration and the method that perform the event action in this example is called Calculate()

4. Test the functionality

Finally you run the application as usual and test the functionality of the new controls.

5. Back-end functionality

If you want to move the functionality to the back-end you can use a standard http angular call, and use a Web Controller to execute the desired logic in the server side.

Last updated