Creating List and Detail Screen Application in LightSwitch 2012

In this article describes how to create a List and Detail Screen in a LightSwitch application using Visual Studio 2012.

In my previous article I described how to edit or delete a record using a Editable DataGrid Screen, see:,

The following is the procedure for creating a List and Detail Screen.

Step 1 

Open the Table (EmpTable) from the Solution Explorer.


Step 2

Click on the Screen Button from the Menu bar to add the screen.

screen add.jpg

Step 3

Since we are  to creating a List and Detail Screen, choose the "List and Detail Screen" template. Under Screen Information we provide the Screen Name and select any Screen Data and then click OK.

list and detail src.jpg

Step 4

Once you click the "OK" button, the screen designer appears inside Visual Studio IDE.

src designer.jpg

Step 5

Press F5 to run the application.

Running Employee tab.jpg

Step 6

Click on the Tasks option in the menu and choose the Emp Tables List Detail.

Emp Table List Detail.jpg

Step 7

This will open the "Emp Tables List Detail" screen as a new Tab. In the same screen you will see a "Save" and "Refresh" button, a "Search Panel" and a button called "Export to Excel". It also consists of "Add", "Edit" and "Delete" buttons. I have described all the functionalities of these buttons in my previous article.

Emp table list detail src.jpg

Step 8

We can choose any record from the left list. Note that the right panel automatically reflects the record details. This screen is called a List and Details screen. It means that the left panel shows the list and the right panel shows the detail of the selected record.

other record.jpg
Step 9

One new feature or control has been added to the screen named Drop Down List (A-Z). Suppose you click on the drop down; you will see all the column names in the list as shown.

arrange by.jpg

Step 10

By choosing any field from the drop down list, you can easily sort the records. Here you will see that the records have been sorted by Email in ascending order.

sort by Email.jpg

Sorting the records on the basis of Email we get:

email after sorting.jpg