Creating a Custom Search Screen in Visual Studio LightSwitch

Note: This article has been updated for Beta 2 on 3/17/2011

While I was on my speaking trip in Europe a couple folks asked me how they could create their own search screen instead of using the built-in search functionality that LightSwitch provides. Basically they wanted the search to come up blank until a user entered specific search criteria and they only wanted to search on a specific field. In this post I’ll explain a couple options you have that allow you to tweak the default search screens and then I’ll show you how easy it is to build your own. Let’s get started!

Creating a Search Screen

Creating search screens in LightSwitch is really easy – it takes about 5 seconds once you have your table defined. You just describe your data, create a new screen and then choose the “Search Screen” template. Take a look at this video here: How Do I: Create a Search Screen in a LightSwitch Application?

For instance, say we have a Patient table that we’ve created in LightSwitch (if you don’t know how to create a table in LightSwitch see this video):

To create a search screen for Patient just click the “Screen…” button at the top of the designer or right-click on the screens node in the Solution Explorer and select “Add Screen”. Then select the “Search Data Screen” template and choose the Patients table for the Screen Data:

Hit F5 to debug the application and open the search screen. Out of the box you automatically get searching across any string field as well as paging and exporting to Excel.

Specifying “Is Searchable”

By default all string fields in a table (a.k.a. properties on an entity) are searchable in LightSwitch. For instance if we enter “Beth” into the search screen above then it will return all the patients with the string “Beth” matching in any of the string fields in the Patient table. Sometimes we don’t want all the fields to be searched. For instance if we’re not displaying some of the string fields in the search grid that could look confusing to the user if a match was found in one of those fields – they may think the search is broken. Or if there are many rows in the table with a lot of string fields you can improve performance by not searching on all of them.

To prevent the user from searching on a field in a table, open the table designer (by double-clicking on the table in the Solution Explorer) and highlight the field you want. Then uncheck Is Searchablein the property window:

You can also specify whether the entire table should be searchable by default. If you select the table itself (by clicking on the name of the table at the top, in this case Patient) then you can toggle the Is Searchable property there as well. If you uncheck this, then anytime the table data is displayed in a grid in the system, there will be no search box on the top of the grid. However, what if we want to search on non-string fields? What if we want to show a blank search screen and require the user to enter some search criteria? We can create our own search screen very easily to accomplish this. First we need to write a query that takes a parameter.

Creating a Parameterized Query

For this example let’s create a search screen that searches for Patients older than a certain date that the user enters. In this case we will ask for the Patient’s birth date because we are storing a Birthdate field on the Patient table. To create a query that takes a parameter, right click on the table (in my case Patient) in the Solution Explorer and select “Add Query”. Another way to do that is if you have the Table Designer open you can just click the “Query…” button at the top of the designer. (For an intro to the Query Designer see this video: How Do I: Sort and Filter Data on a Screen in a LightSwitch Application?)

Name the query PatientsOlderThanDate, then add a “Where” filter condition and select Birthdate, <= (is less than or equal to), and then choose @parameter for the value type. Then choose “Add New” and a parameter will be created below for you. I’ll also add a sort on LastName then FirstName ascending.

Creating a Custom Search Screen

Now that we have a query that accepts a parameter we can create a screen based on this query. You actually don’t need to choose the Search Data Screen template, you can choose any template you want, but for this example I’ll stick with the search screen template. For the Screen Data, select the query we just created:

One you pick a template the screen designer opens. You will see the query and its fields on the left of the screen and a hierarchal view of the screen controls in the center. On the right is your properties window. Since our query has a parameter, LightSwitch automatically has added a screen property called “PatientBirthdate” which is used as the parameter to the query (this is indicated by the arrow from the query parameter to the screen property).

Now there’s a few ways you can run a custom search screen. If you select the PatientBirthDate and look in the properties window, you can indicate whether it should be a screen parameter or not and whether it’s required.

If you check “Is Parameter” and “Is Required” then you must call the screen in code and pass in a PatientBirthDate value. This also means that the screen will not show up in the navigation menu. Here’s how you would call it in code.

If you check “Is Parameter” but uncheck “Is Required” then this makes the screen parameter optional which means you can still pass the value in code but users will also see it on their navigation menu. For this example I’ll check off “Is Parameter” but not make it required. This gives me the most flexibility.

Finally you can decide whether you still want to show the search box on the grid by selecting the PatientsOlderThanDate query on the left and toggling the “Support search” property.

If you leave the search on the grid this means that you want to let users search within those results that are already displayed after executing our query. I find it to be a bit confusing to leave it on there but you may have your reasons. For this example, I’ll uncheck that. You can also change the display label for the search field and/or do other visual tweaks to the screen here or at runtime. If you want this search screen to be the default screen that opens when the application launches, from the main menu select Project –> Properties and then select the Screen Navigation tab and select the screen and click the “Set” button at the bottom of the page:

Now we can hit F5 to start debugging and we will see our custom search screen in the navigation menu. When we open the screen no records are displayed initially. You will also see the Birthdate field as a date picker on the top of the screen. When you enter a date and hit enter or tab, the query will automatically execute and display the results:

That’s it! It should literally take about 5 minutes to create your own custom search screen with Visual Studio LightSwitch.

Enjoy!

Comments

• Anonymous
  November 14, 2010
  Thank you very much I was looking on this subject , Bath are always saved the day thank you thank you thank you

• Anonymous
  November 14, 2010
  Thank you very much I was looking on this subject , Bath are always saved the day thank you thank you thank you

• Anonymous
  November 22, 2010
  Beth, i dont want to use default primary key that is id, instead i want to give of my own. Is it possible? Thanks

• Anonymous
  November 23, 2010
  Hi Zubin, If you're modeling your data in LightSwitch you can't change the primary key. However if you model your database outside of LightSwitch and then attach to an existing database then you have complete control. Why do you want to change the primary key anyways? Are you really just looking to have it unique? In Beta2 you will be allowed to indicate uniqueness and it will also support composite keys. BTW, if you want to ask more questions like this to the team you can do that in the forums: social.msdn.microsoft.com/.../threads Thanks!

• Anonymous
  November 24, 2010
  Hi Beth, Thanks for your reply. I already have a field which i need to be unique and do not want it be repeated. One more thing somehow i am using other field besides id to be summary and though its selected as summary still what i can get is id displayed as summary rather than other field. Thanks

• Anonymous
  November 29, 2010
  Hi Zubin, You'll be able to specify unique fields in Beta 2. Regarding your summary field, what data type is it? Sounds like a bug. Try creating a calculated field and specifying the result string you want to display. Please report bugs here: connect.microsoft.com/visualstudio Thanks for evaluating LightSwitch!

• Anonymous
  April 25, 2011
  Hi Beth I have a Patients table that has foreign keys like the following eg. Patients:     PatientID(int), idSurname(int, required), idName(int, required), idNickName(int, NOT required), DOB, idNationality(int) Surnames:      SurnameID(int),      Surname    (string, required) Names:         NameID(int),         NameText   (string, required) Nicknames:     Nickname(int),       Nickname   (string, required) Nationalities: NationalityID (int), Nationality(string, required) 2 issues here

1. At the search screen it is impossible to retrieve the patients of an inserted, at the search field, surname:   I mean that the search query does not search in the lookup tables failing to display any patients!!!   The same would happen with the nationality. If i create a search
2. The CreateNewPatient screen requests an entry for the Nickname, (which is NOT required). Unfortunately this cannot   be declared at the patient's table. And a last issue is how can i declare an SQL view to work around the issue 1? SOrry if I confused you... but the above seem to be a pain in developing a proper db app thanx a million and congratulations for your projects NAngel

• Anonymous
  July 12, 2011
  Hi Beth, Quick question just to make sure. Summary properties are created on the fly right? Are they therefore not searchable from the screens? Let's say I have Customer: FirstName, LastName. If I only use a summary field FullName, and leave the other 2 fields behind, can I stil search "Beth" in the screen and get the results...? Probably not right? is there a nice workaround?

• Anonymous
  July 13, 2011
  Hi Juan, It's not summary properties that are the issue, it's computed properties. You can't search on computed properties because they don't exist in the database. The scenario you describe would actually work because LightSwitch will by default search across all string fields in the database, regardless if you are displaying them on the screen or not. You can control this by setting IsSearchable on the entity property in the Data Designer. So "Beth" (firstname) or "Massi" (lastname) would work but "Beth Massi" (fullname) would not. You would need to create a custom query with a search parameter to do that. HTH, -Beth

• Anonymous
  April 11, 2012
  The comment has been removed

• Anonymous
  April 13, 2012
  The comment has been removed

• Anonymous
  September 26, 2012
  hi messy this is my e-mail address ..........uu can feel free if u can email me                               Na7693@gmail.com

• Anonymous
  January 18, 2013
  Beth, How do you create select top 10 query for example? Thanks, Oded Dror

• Anonymous
  November 08, 2013
  Me would like to seek as more the terms but you can ignore some of the terms on seek to be non? You can write a command to look up to be non?

• Anonymous
  March 19, 2016
  Aw, this was a really good post. Finding the time and actual effort to make a great article… but what can I say… I hesitate a whole lot and don't manage to get anything done.