Building Mobile, Touch-Oriented Business Apps with the HTML Client in Visual Studio LightSwitch 2012
- Introduction
- Installing the HTML Client Tools
- Creating a Sample Project
- Preparing the Data
- What Users See: Screens in the HTML Client
- Designing Queries and Showing Query Results with Navigation
- Testing the Application
- Editing Items
- Useful Resources
- Conclusions
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Designing Queries and Showing Query Results with Navigation
You can define queries using the same method we've seen so far, and easily show query results in the HTML client. To understand how queries work, in Solution Explorer right-click the Orders table and select Add Query. In the Query Designer, define a query called UpcomingOrders and add a filter based on the OrderDate property, as shown in Figure 12.
)
Figure 12 Defining a new query.
The query will return only orders that haven't been shipped. You want to show the query result inside a specific screen, so right-click HTML Client (Startup) in Solution Explorer, select Add Screen, and create a new Browse Data Screen called BrowseUpcomingOrders, based on the UpcomingOrders query. Now you have a data-bound screen, but you have to provide users with a way to open it. Go back to the BrowseCustomers screen, expand the Command Bar item, and add a new button. In the Add Button dialog, select the showBrowseUpcomingOrders method in the Navigation group of the Choose an Existing Method drop-down list, as shown in Figure 13.
)
Figure 13 Navigating between screens with auto-generated methods.
This auto-generated method allows users to open the specified screen simply by touching the appropriate button on the application bar. By following the earlier example, you can change the icon for the button, replacing the default icon with the Filter icon. This example is related to navigation options that you have when working with the HTML client.