Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Implementing Search Screens
If you have experience with the Silverlight desktop client in LightSwitch, you know that screen templates of type Search Screen and Editable Grid Screen implement search by default, via specific controls and a search box. In the HTML client, search isn't available in the Browse Data Screen, but luckily implementing a search screen isn't difficult. First you need to define a query with parameters that filter data based on some text, and then you bind a browse screen to that query. In Visual Studio LightSwitch, right-click the Orders table in Solution Explorer, and then select Add Query. In the Query Designer, define a new query called OrdersBySearch with the filters represented in Figure 9.
)
Figure 9 Defining a new query as the base for searching.
The query will search for orders in which the OrderDescription property contains the specified value or the related customer's name contains the specified value. Now it's time to create a data-bound screen and make it reachable from the home page. Follow these steps:
- In Solution Explorer, right-click HTMLClient > Add Screen.
- Select the Browse Data Screen and specify the OrdersBySearch query as the data source (see Figure 10).
- In the Screen Designer, LightSwitch adds a field called Order Search Term, which is where users enter the value that will be passed to the query as the parameter. By default, this field is represented by a Text control, which is read-only. Replace it with a Text Box control (see Figure 11) so that users can enter values.
- In the Screen Designer, replace the List control with a Tile List, leaving only the Customer, OrderDate, and Amount properties. This information will be displayed for each order in the search result.
- By using the techniques discussed in part 1 of this series, go back to the home screen (BrowseCustomers) and add a new button to the command bar, pointing to the newly created screen. The method to assign to the button is showBrowseOrdersBySearch, available under the Navigation group. Once the button has been created, replace its Star icon with Search.
)
Figure 10 Creating a new Browse screen that implements search.
)
Figure 11 Replacing the Text control with a Text Box.
Now you can run the application, open the search screen, and search for some values. Figure 12 provides an example.
)
Figure 12 The custom search screen displays the desired results.
With just a few steps, you have created a search screen that works exactly as expected.