Articles → Light Switch 2011 → List And Details Screen In Light Switch 2011

List And Details Screen In Light Switch 2011

In this article I will explain how to create list and details screen in lightswitch 2011.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.
Silverlight runtime version 4 or 5 is installed on your machine

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create project using visual studio?
How to create tables in lightswitch?
How to create screens in lightswitch?
What are different types of screens?

Steps Of Execution

In this tutorial I will execute certain steps for the demonstration of list and details screen in lightswitch application. These steps are

Create a new project
Create new tables
Add a list and detail screen

Let us execute each step

Create A New Project

First of all create a new project. See the screen shot below for project structure

Picture showing the project structure of the lightswitch application

Click to Enlarge

Create New Tables

For this tutorial I have created 3 tables i.e. country, state and city and there exists a relationship between the tables.

One country can have many states
One state can have many cities.

See the screen shot below for table structures

Picture showing the Country table in the lightswitch designer

Click to Enlarge

Picture showing the State table in the lightswitch designer

Click to Enlarge

Picture showing the City table in the lightswitch designer

Click to Enlarge

Add A List And Detail Screen

For adding a screen, right click on the Screens folder and click on Add Screen… A popup window appears as shown in figure below

Click to Enlarge

As you can see in the figure above when you select data source from ‘Screen Data’ drop down, you can see 2 checkboxes. First checkbox is for displaying the details of the table itself. For example if I am choosing Country table then first checkbox shows the country table details on the right hand side.

Second checkbox shows the details of related entities. For example a country is associated with state (we have created a relationship between 2 tables). So second checkbox shows details of state. For this tutorial I am clicking on both the checkboxes.

When you click on Ok a screen in added in the project. See the screen shot of designer screen

Picture showing the design screen of the list and detail screen

Click to Enlarge

Check how 2 entities are associated in design screen

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, July 31, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**