Adding a Search Contract item template

This topic shows how to add the Search Contract item template to an app created in the Split project template. The item template for search enables an app to present a search results page for a search that's initiated by the Search charm. The concepts in this topic also apply when you add search to the Grid project template. For descriptions of the item templates, see JavaScript item templates. For most apps, you can use item templates included with Microsoft Visual Studio 2012 to simplify your app development.

The Search Contract template implements the recommended navigation model used in the Grid, Split, and Navigation project templates. For more info, see Navigation model.

Prerequisites

• Create a project using the JavaScript Split App template.
• Complete the steps in the "Example of binding data to the UI" section in Adding data to a project template for the new project, and verify that the project runs correctly.

For more info and other examples that use the search contract, see QuickStart: Adding search.

To add the Search Contract item template

1. Open the Split app that you previously created.
2. In the pages project folder, add a new folder named search.
3. Right-click the search folder in Solution Explorer, and then click Add > New Item.
4. In the center pane of the Add New Item dialog box, select Search Contract. For this example, keep the default name, searchResults.html, that appears in the Name box.
5. Click Add.

   Visual Studio adds searchResults.html, searchResults.css, and searchResults.js to the project in the new search folder.

6. Open default.html and add this script reference:
   HTML

   Copy

   
   
   <script src="/pages/search/searchResults.js"></script>
   
   
   

   Caution  Search will fail without an error if you don't add the script reference in the preceding step.

7. Open searchResults.js and verify that the URI for the search page is correct:
   JavaScript

   Copy

   
   
   var searchPageURI = "/pages/search/searchResults.html";
   
   
   

   If you don't put the search files in the search folder, you'll need to update the URI.

8. Open searchResults.html and verify the reference to searchResults.css is correct, which should be as follows.
   HTML

   Copy

   
   
   <link href="/pages/search/searchResults.css" rel="stylesheet" />
   
   
   

To customize the app for search

1. In searchResults.html, update the property names that refer to sample data. For this example, the subtitle and description properties need to be renamed. Instead, use author and pubDate. (For more info about these changes, see Adding data to a project template.) Replace the following code in the itemTemplate DIV element:
   HTML

   Copy

   
   
   <h4 class="item-subtitle win-type-x-small win-type-ellipsis" 
       data-win-bind="innerHTML: subtitle search.markText"></h4>
   <h4 class="item-description win-type-x-small win-type-ellipsis"
       data-win-bind="innerHTML: description search.markText"></h4>
   
   
   

   with this:

   HTML

   Copy

   
   
    <h4 class="item-subtitle win-type-x-small win-type-ellipsis"
       data-win-bind="innerHTML: author search.markText"></h4>
    <h4 class="item-description win-type-x-small win-type-ellipsis"
       data-win-bind="innerHTML: pubDate search.markText"></h4>
   
   
   
   

2. Open searchResults.js and update the template property names that are used in the _searchData function. Replace subtitle with author, and replace description with pubDate, as shown here. Replace the following code:
   JavaScript

   Copy

   
   return (item.title.indexOf(queryText) >= 0 || item.subtitle.indexOf(queryText) >= 0 || 
       item.description.indexOf(queryText) >= 0);
   
   

   with this:

   JavaScript

   Copy

   
   return (item.title.indexOf(queryText) >= 0 || item.author.indexOf(queryText) >= 0 || 
       item.pubDate.indexOf(queryText) >= 0);
   
   

3. Add code to navigate to the correct page from the search results. In search.js, replace the following code:
   JavaScript

   Copy

   
   _itemInvoked: function (args) {
       args.detail.itemPromise.done(function itemInvoked(item) {
           // TODO: Navigate to the item that was invoked.
       });
   },
   
   

   with this:

   JavaScript

   Copy

   
   _itemInvoked: function (args) {
       args.detail.itemPromise.done(function itemInvoked(item) {
           // TODO: Navigate to the item that was invoked.
           var idx = Data.items.indexOf(item.data, 0);
           nav.navigate("/pages/split/split.html", {
               group: item.data.group, selectedIndex: idx
           });
       });
   },
   
   

   This code retrieves the index of the selected blog post from the original unfiltered blog list and passes it to the WinJS.Navigation.navigate function.

To test search

1. Select Local Machine from the drop-down list next to the Start Debugging button on the debugger toolbar.
2. Click F5 to start debugging.
3. Open the Search charm. (Point to or tap the lower-right corner of the screen.)
4. In the search box, type the name of a blog author, such as Leon, and click the search button.

   The search results page shows results for blogs that include the search term. This illustration shows the search results page when "Leon" is entered in the search box.

   

5. Click one of the search results.
6. The Split app opens the master/detail view with the selected blog showing in the right pane.

Related topics

JavaScript project templates for Windows Store apps

JavaScript item templates for Windows Store apps

Adding a Search Contract item template

Build date: 3/11/2013