Introduction:

In this tutorial, we are going to see how to develop the first Visual Studio Light Switch Application step-by-step. In our previous article, we have seen an Overview of what Visual Studio Light Switch is all about and also on the different types of templates that are available to kick start in developing the desired application as per the requirement. The main advantage of using the Visual Studio Light Switch Application is it automatically generates the User Interface for the Data Source without writing the code. Let us see the steps on how to develop our first Light Switch Application.

Steps:

Open Visual Studio 2012 IDE in administrator mode, create a new project with the Visual Studio Light Switch template, and enter a valid project name with the location specified as shown in the screen below.

Now we can see that the application project is created and it has the default folders, which we saw in the previous article. Out of the 2 options let us first select the Create Table option which we can use the existing database or create a new database and use it across the application. Here in this sample we will create a new table as shown in the screen below.

We have entered the default table name and the default columns that are required for the data to be loaded. Now save the table by simply clicking on the Save button or using the Control + S key from the keyboard. We can see the Table added under the data source folder of the project as shown in the screen below.

Now we are done with creating a table structure for our application to save the data. Our next step is to create an UI screen which maps with the table which we created. Click on the Screen button from the top panel as shown in the screen below.

Clicking on the Screen button will open a window with the list of available Screen Templates from which we can select our desired template as per the requirement as shown in the screen below.

Now provide a valid Screen Name and select the data source from the Screen Data option that is available in the right side menu as shown in the screen below.

Click on the OK button to save the screen design and we can see a message the code is been created. In the solution explorer we can see a new screen with the name EmployeeTableDetail added to the folder Screens as shown in the screen below.

If by any chance we want to change the display of the field, we can do that with this screen by simply Dragging and Dropping in the right window. Here we have moved the EmpSex column one step above as shown in the screen below.

Once we are done with the changes by adding or deleting new columns or rearranging the columns we are done with our development. Press F5 to build and execute the application and we can see the application in action as shown in the screen below.

Now manually enter the data that should be stored to the database and we can see the data listed on the side list view as shown in the screen below.

Conclusion:

In this article we have seen how to develop your first Visual Studio Light Switch 2012 application easily with the step by step approach.