Nested Autocomplete Box in LightSwitch 2012 - Part 1

This article shows how to create a Nested AutoCompleteBox using a LightSwitch Application (Visual C#) in Visual Studio 2012.

This article has been divided into two parts.

Here in Part 1, I will be describing the tables and the relationship among those tables.

The following is the procedure for creating a Nested AutoCompleteBox

Step 1

Open the Solution Explorer.

sol ex.jpg

Step 2

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

add table.jpg

Step 3

In this way we will add three tables (one is an Employee table, another is a City table and the last one is the Country Table). The tables appear as in the following:

Employee Table

employee.jpg

City Table

city.jpg

Country Table

country.jpg

Step 4

Here, we will create a one-to-many relationship among the three tables.

In order to establish the relationship between the City and Employee tables, click on the "Add Relationship" button in the menu bar.

add relationship.jpg

The Add New Relationship Dialog box will appear. Using this dialog box we can easily establish the relationship.

add rela1.jpg

As we click on the "OK" button the relationship between City and Employee table is shown.

relation new.jpg

Step 5

Once again, click on "Add Relationship". An Add New Relationship dialog box will appear. Now this time we will establish the relationship between Country and the City.

add rela2.jpg

As we click on the "OK" button the relationship between the City and Country tables are shown.

rela shown2.jpg

Step 6

In order to filter the City on the basis of Country, right-click on the City table and choose "Add Query".

add query.jpg

The Query Designer will appear. This query filters City by Country.Id.

query.jpg

Step 7

In the Solution Explorer, right-click on the Screens and choose "Add Screen".

Add src.jpg

Step 8

The Add New Screen dialog box appears. Select the "New Data Screen" from the Screen Template, under screen information, choose "Employees" under screen data and provide some name to the Screen and click the "OK" button. 

src desi.jpg