Articles → LIGHT SWITCH 2011 → Multiple Search Parameters In Lightswitch 2011

Multiple Search Parameters In Lightswitch 2011

In this article I will explain how to specify multiple search parameters in lightswitch application.

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.

Prerequisite Knowledge

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

How to create lightswitch tables?
How to add screens in lightswitch application?
How to add data item?
How to create modal pop up?
How to add query for table.
How to bind grid with query?
How to add relationship between tables?

Creation Of Table

Picture showing the sample table and relationship between them

Click to Enlarge

I have created two tables Employee and Department and there is one to many relationship between Department and Employee table.

Creation Of Editable Screen

Picture showing creating the editable grid screen for both the tables

Click to Enlarge

I have created 2 editable grid screen one for the department and other for employee.

Create Query On Table

Picture showing creating the query on the table

Click to Enlarge

I have added a query in Employee table. In the query I have added 2 filter parameters i.e. EmployeeName for filtering records based on employee name and Id for filtering records based on department. Please note that both the parameters are optional.

To understand an optional parameter consider a scenario that we have entered some value in EmployeeName parameter say ‘karan’ so query to search Employee table becomes something like this

declare @EmployeeName as varchar(max)
  set"@EmployeeName = 'karan'
  select * from Employee where EmployeeName = @EmployeeName

And if there no value entered in EmployeeName parameter then query becomes

select 
  * 
from 
  Employee

The query which I have written above is just to explain you the concept of optional parameter. In lightswitch the internal logic may be different.

Add Query On Editable Screen

Once the query is added in the table, it should also be added in the screen using Add Data Item…. option.

Please see the screen shot below for the screen designer after adding query.

Picture showing adding the query on the editable grid screen

Click to Enlarge

Now delete the existing grid and drag the query on the screen. The screen designer will become

Picture showing deleting the existing grid and drag the query on the screen

Click to Enlarge

As you can see in the figure above there are 2 textboxes ‘Employee Name’ and ‘Id’. These are the filtered parameters which we had added in the query. We don’t require these parameters so we can delete these extra fields. After deletion the screen designer becomes.

Picture showing the design screen after deleting Employee Name and Id filter

Click to Enlarge

Add Data Items For Filters

Add 2 data items one of type string and other is of type Department

Picture showing adding the 2 data items in the project

Click to Enlarge

These data items are added on your designer screen as shown in figure below

Picture showing the data items added in the design screen

Click to Enlarge

Add Filters In Popup

Add a modal popup in the screen and drag both data items on the modal window

Picture showing adding both the data items as filter

Click to Enlarge

Here a button ‘Apply Filter’ is also added to close the modal window after the filter criteria is applied.

Add Button To Open Modal Window

A button Filter is added to open modal window as shown in figure below

Picture showing adding a new button with the caption filter

Click to Enlarge

Button’S Execute Events

/// <summary>
/// Method invoked when 
/// Filter button is clicked
/// </summary>
partial void Filter_Execute() {
	this.OpenModalWindow("Group");
}

/// <summary>
/// Method invoked when Apply Filter
/// button is clicked.
/// </summary>
partial void ApplyFilter_Execute() {
	this.CloseModalWindow("Group");
}

The code written above is for opening and closing modal window.

Bind Query Parameters With Data Item

To bind parameter with data items first of all click of EmployeeName query parameter and press F4. Property window appears

Picture showing setting the parameter binding for query

Click to Enlarge

In the Parameter Binding textbox write parameter name (EmployeeNameParam in this case).

Picture showing the parameter binding on the design screen

Click to Enlarge

Similarly for second parameter i.e. Id, add Parameter Binding.

Picture showing the parameter binding for second data item

Click to Enlarge

Output

Run application

Click to Enlarge

Click on Filter button and add Employee Name in textbox

Click to Enlarge

Click on Apply Filter

Click to Enlarge

In the similar way you can filter for department as well.

Download

Posted By -	Karan Gupta

Posted On -	Tuesday, July 10, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**