How to add a new component in a migrated application
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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.
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.
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()
Finally you run the application as usual and test the functionality of the new controls.
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.
WebMap's migrated application use the
