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.
Taken from the earlier article here, Customer and Town tables are created with the following schema.
Creating a query that filters Customers by Town is the key step to making this work. To do this…
- 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’.
- Click on the ‘Add Parameter’ button and add a parameter called ‘TownId’ with a data type of ‘Integer’
Fig 1 – Creating a parameter called TownId
- 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.
Fig2 – Adding a filter on the TownId parameter
- 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.
Fig3 – Create a new screen and choose ‘CustomersByTown’ in the ‘Screen Data’ dropdown
- 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)’
Fig 4 – Creating the prpTown property
- Click on the ‘Add Data Item’ and add a ‘Towns – Town(All)’ query
Fig 5 – Adding the ‘Towns – Town(All)’ query
- 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.
- 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’.
Fig 7 – Selecting the ‘Choices’
- Now map the ‘TownId’ parameter of the ‘CustomersByTown’ query to the prpTown’ value. Click on the ‘TownId’ Parameter for ‘TownsByCounty
- On the properties for the parameter, enter ‘prpTown.ID’ for the ‘Parameter Binding’
Fig 6 – Deleting the default ‘Customer Town Id’ textbox
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.
Fig 10 – Illustrations of the final screens