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.

solutionex.jpg

Step 2

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

ADDscreen.jpg

Step 3

The table appears.

emptytable.jpg

Step 4

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

propwin.jpg

Step 5

In the table, add the following values.

tab.jpg

Step 6

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

tab.jpg

Property Window

propjobprofilechoicelist.jpg

Step 7

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

choicelistjobprofileappear.jpg

Step 8

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

choicelistcon job.jpg

Step 9

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

expchoicelist.jpg

Step 10

The Choice List dialog box appears on the screen.

choicelistjobprofileappear.jpg

Step 11

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

choicelistentering exp.jpg

Creating a Screen

Step 1

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

solexphtmlclientaddscreen.jpg

Step 2

The Add New Screen dialog box appears.

addnewsrc.jpg

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.

Add new screen name data.jpg

Step 4

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

lightswitch Html designer.jpg

Step 5

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

Browsetabpropwin.jpg

Step 6

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

list tabs.jpg 

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.

output11.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all