How to Create Web Application Using Visual Studio LightSwitch HTML Client

In my some of the articles, we have explained Visual Studio LightSwitch web and desktop applications. Today, we shall explain Visual Studio LightSwitch HTML Clients that enable you to create web applications using HTML5, JavaScript and CSS3.

LightSwitch HTML Clients are built on standards-compliant HTML5 and JavaScript and provide modern, touch-first experiences on Windows RT, Windows Phone 8, iPhones and iPads with iOS 5/6, and Android 4.x devices.

We shall create a simple web application using a LightSwitch HTML Client.

Prerequisites

1. Visual Studio 2012
2. Visual Studio 2012 Update 2 or Update 3
   Or download the free version of Visual Studio 2013

The LightSwitch team announced the release of the LightSwitch HTML client in Visual Studio 2012 Update 2. Now HTML Client is available in Update 3 and Visual Studio 2013 too.

Setup the Project

Once your prerequisites are met, fire up the Visual Studio 2012 (in my case).



Create a new LightSwitch HTML Application as shown in the following figure.



Name the project "HTMLClientWebApp".



We will just start with the creation of a table. Click the option highlighted above.



Name the table "Student" and add three columns as shown above. Once the table is ready, right-click on the HTMLCLient folder.



We need to create a HTML screen. Select the option "Add Screen" to add the HTML Screen.



As a startup screen, we will display a list of students registered. Follow the steps shown in the figure above to create the Student Browser screen.



Once the screen is created, just press the "Save" button to save the initial layout of the web application.


The Browse Student will look like above. So our Browse Screen is ready. We need to add a screen to Add/Edit students.



Follow the procedure shown in the preceding figure to add a screen of template type "Add/Edit Details Screen".



After adding the Add/Edit screen, the solution will be as in the preceding figure.

Now we have the Add/Edit screen, we need to popup a screen to add/edit the student detail. Click on the Command Bar and click on the Add button to add a "Add" command button.



A "Add Button" dialog will appear if you click on "Add" link under the Command Bar. Select the "addAndEditNew" from the methods dropdown as shown in the preceding image.



After selecting the "addAndEditNew" method, select the "Add Edit Student" screen from the Navigate To dropdown.

We have our "Add" command button in the Command bar. To edit the student detail, we need to add one more button.



As explained previously, click on the Add link under the Command Bar. Select the "editSelected" method.



Select the "Add Edit Student" screen from the Navigate To dropdown to add the Edit button as shown in the preceding figure.



Make sure we have two buttons as shown in the preceding figure.

Now we have our web application ready without penning down for a single line of code. Just press Start button to start our web application.

Output



Happy Coding