Developing ComboBox Filtered Screen Using Light Switch 2012

This article describes how to create a ComboBox filtered screen in LightSwitch using Visual Studio 2012.

The following is the procedure for creating a ComboBox search screen in LightSwitch 2012.

Step 1

Open the Solution Explorer.

sol explo.jpg

Step 2

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

Add Table.jpg

Step 3

The table appears. In this way we create two tables (Customer and Item).

customer.jpg

The Item Table is shown below.

Item.jpg

Step 4

Right-click on the Customer Table and select "Add Query".

Add Query.jpg

The Query Designer appears.

querydesigner.jpg

Step 5

In the Query Designer, click on the "Add Parameter" button and add a parameter named "Id" of the "Integer" data type.

parameter in Query.jpg

Step 6

Now click on the "Add filter" button. Under the Filter condition, next to the where condition from the drop-down list, select "Id". From the next drop-down list select the "Equal" condition. From the next dropdown list select the "parameter" and from the last drop down list, select "Id".

Filter.jpg

Step 7

Right-click on the Screens and choose "Add Screen".

add src.jpg

Step 8

Select the Editable Grid Screen from the Screen Template. Under Screen Information we provide the Screen Name and choose CustomerByItem in the Screen Data and then click OK.

add nw src des.jpg

Step 9

The Screen Designer appears.

Step 10

Select "Add Data Item" from the Menu bar of the Screen Designer.

add data item.jpg

Step 11

The Add Data Item dialog box appear on the screen. Select the Local Property radio button. From the Type option, select the Item (Entity) and name the property "propitem".

add data item dialog.jpg

Step 12

Again click on the "Add Data Item". Select the Query radio button and choose "Items" and click "OK".

add data item query.jpg

Step 13

Drag "propitem" onto the screen designer above the Data Grid. The screen designer should look like this.


propitem drag.jpg

Step 14

After dragging the "propitem" onto the screen designer, go to the property window of the "propitem" and set the choices to "Items".

choice item.jpg

Step 15

Mapping the "Id" parameter of the "CustomersByItem" to the "propitem" value.

map id.jpg

Step 16

Now go to the "Id" property window and in the Parameter Binding TextBox, enter "propitem.Id".

prop item.id.jpg

Step 17

Press F5 to run the application.

output.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all