Creating a LightSwitch Application in HTML Using Visual Studio 2012

Creating a LightSwitch Application in HTML using Visual Studio 2012

In this article I describe how to create a LightSwitch application in HTML using LightSwitch Visual Studio 2012.

Adding Data to a Table

Step 1

Open the Solution Explorer.

Step 2

Under the Solution Explorer, right-click on the Server node and choose "Add Table".

Step 3

The table appears.

Step 4

In the Properties window, under the text box for the Name property, enter "Tab".

Step 5

In the table, add the following values.

Step 6

From the table,choose the Jobprofile field, and then, in the Properties window, choose the Choice List hyperlink.

Property Window

Step 7

The "Choice List" dialog box appears on the screen.

Step 8

Enter the following value in the ChoiceList dialog box and click the "OK" button.

Step 9

Similarly from the table, choose the Experience field, and then, in the Properties window, choose the "Choice List" hyperlink.

Step 10

The Choice List dialog box appears on the screen.

Step 11

Enter the following value in the ChoiceList dialog box and click the "OK" button.

Creating a Screen

Step 1

Go to Solution Explorer, right-click on the "HTML Client" node, and then choose "Add Screen".

Step 2

The Add New Screen dialog box appears.

Step 3

In the Select a screen template list, choose "Browse Data Screen". In the Screen Name text box, enter "Browsetab" and in the Screen Data list, choose "Tabs", and then select the "OK" button.

Step 4

In the Screen Designer, choose the "Screen" | "Browsetab" node.

Step 5

In the Properties window, choose the Display Name text box, and then enter "BrowseTab".

Step 6

In the Screen Designer, choose the "List" | "Tabs" node.

 

Step 7

In order to test the application choose the "Debug" option. No employee data appears since we haven't entered any data until now. We'll add a screen for both creating and editing data.