LightSwitch – Creating a ComboBox filtered Search Screen

Overview of Article

LightSwitch includes a ‘Search Screen’ template making it very easy to create a search screen. The default search screen includes a textbox allowing you to enter in search criteria. The following article describes how to construct a search screen where results are filtered by a ComboBox. As of LightSwitch beta 2, the ComboBox control has been superseded by the ‘AutoCompleteBox’ control.  

The Customer and Towns example is used to create a customer screen which is filtered by town. The final solution is based upon a Customer query which filters the results by town.

Data

Taken from the earlier article here, Customer and Town tables are created with the following schema.

Customer
ID Int32
Firstname String
Surname String
Town Town
Town
ID Int32
TownName String

Creating a query that filters Customers by Town is the key step to making this work. To do this…

  1. Right click on the Customer Entity and select the option to add a new query. The query designer now appears. Rename the query to ‘CustomersByTown’.
  2. Click on the ‘Add Parameter’ button and add a parameter called ‘TownId’ with a data type of ‘Integer’
    image
    Fig 1 – Creating a parameter called TownId
  3. Now click on the ‘Add Filter’ button. Next to the ‘where’ clause, select ‘Town.Id’. In the dropdown box that enables you to select the condition, choose ‘Equals’. In the next dropdown box, select ‘parameter’ and select ‘TownId’ in the final dropdown.
    image
     Fig2 – Adding a filter on the TownId parameter

Screens

  1. As we’re creating a grid type screen, we’ll use the ‘Editable Grid Template’ to create a new screen based upon the ‘CustomersByTown’ query.
    image
    Fig3 – Create a new screen and choose ‘CustomersByTown’ in the ‘Screen Data’ dropdown
  2. Click on the ‘Add Data Item’ and create a new local property called prpTown. Select the query radio button and choose ‘Towns – Towns*(Select All)’
    image
    Fig 4 – Creating the prpTown property
  3. Click on the ‘Add Data Item’ and add a ‘Towns – Town(All)’ query
    image
    Fig 5 – Adding the ‘Towns – Town(All)’ query

  4. Drag ‘prpTown’ onto the screen designer into the section above the Data Grid in order to create a AutoCompleteBox. Delete the ‘Customer Town Id’ textbox that is created by default by the template. The screen designer should look like below.

    image

  5. Fig 6 – Deleting the default ‘Customer Town Id’ textbox

  6. In the AutoCompleteBox which is created, we need to populate the control with a list of towns. To do this, set the ‘Choices’ property to ‘Towns’.
    image
    Fig 7 – Selecting the ‘Choices’
     
  7. Now map the ‘TownId’ parameter of the ‘CustomersByTown’ query to the prpTown’ value. Click on the ‘TownId’ Parameter for ‘TownsByCounty

    image
    Fig 8 – Click TownId to set the TownId parameter

  8. On the properties for the parameter, enter ‘prpTown.ID’ for the ‘Parameter Binding’

    image
    Fig 9 – Set the TownId parameter here

Conclusion

If we now run the application and open the form, customers can now be filtered based upon the Town AutoCompleteBox. If we wanted to extend the screen to include additional search criteria, we could do this by amending the ‘CustomerByTown’ query and adding additional search criteria controls to the search screen.

image image

Fig 10 – Illustrations of the final screens

 

Advertisements

About dotnettim

Tim Leung is a Microsoft .Net / SQL Server developer based in England.
This entry was posted in LightSwitch. Bookmark the permalink.

14 Responses to LightSwitch – Creating a ComboBox filtered Search Screen

  1. Pingback: LightSwitch – Creating a ComboBox filtered Search Screen | Kingsley A. Bainn

  2. jdp says:

    When I drag the ‘prpTown’ onto the screen designer, the control created is a data grid and can be modified to a list but not to an AutoCompleteBox! What’s wrong?

  3. jdp says:

    I found what was wrong… When I created the new Data Item, I selected the Query radio button instead of Local Property…

  4. Josh Moore says:

    Brilliant step-by-step instructions. A couple of things I found:
    Step 2 shouldn’t have the line “Select the query radio button and choose ‘Towns – Towns*(Select All)’”. You can’t select the query radio button at the same time as choose to insert a Local Property. That line should actually replace step 3, and then it works.

    Secondly, these steps work great when the options you want to display in the dropdown filter are stored in a table. However you can’t do the same thing if the options you want to put in the dropdown are stored in a “Choices List” attached to a dropdown on a table. I can’t find any way to have the filter drop down look at the choices list.

    So as long as the options are listed in a table, these steps are excellent! Thanks so much. I would never have figured this out on my own!

  5. Thanks for the useful article Tim.
    Do you know how I can show all records when there is no filter value?

  6. dotnettim says:

    @Josh – thanks very much for your comments and for clarifying steps 2 and 3 🙂

    @Simon – when you create the query parameter, you can make the parameter ‘optional’ using the properties window. When parameters are optional, any filter clause will not be applied if a value is not supplied. This would allow you to show all records when there is no filter value.

  7. Matthew Pass says:

    Many thanks – helped me out a lot.

  8. Hi this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you
    have to manually code with HTML. I’m starting a blog soon but have no coding expertise so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

  9. Ian says:

    Thanks Tim, exactly what I was looking for 🙂

  10. roberto12cr says:

    Hi, just a question, there is a way to add the “ALL” to the list of town?
    I had tried but nothing yet…

    By the way, very useful post

  11. I’m not that much of a online reader to be honest but your sites really nice, keep it up!
    I’ll go ahead and bookmark your website to come back later. Many thanks

  12. WoundedEgo says:

    When I drag and drop the property it is a plain Textbox and I have no choices.
    ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s