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).

Visual Studio 2012

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

HTML Application

Name the project "HTMLClientWebApp".

HTML client web Application

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

HTML web table

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

add screen in visual studio

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

Add 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.

Browser screen

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

layout of 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.

Edit HTML Screen

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

Add and 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.

Command Bar in HTML Screen

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.

methods dropdown in html

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.

command button in the Command bar

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

Add link under Command Ba

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

HTML Screen Navigate

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

HTML web application

Happy Coding

Up Next
    Ebook Download
    View all
    Learn
    View all