JavaScript item templates for Windows Store apps

Item templates are app files that contain commonly used code that can be added to a project template to reduce development time.

The item templates for Windows Windows Store apps contain the appropriate references and script tags to support Windows Library for JavaScript. Some of the item templates implement a contract, which is like an agreement between one or more apps to use specific APIs. When you add a contract template (File Open Picker Contract, Share Target Contract), the app manifest is updated with the appropriate declarations. You can see the settings for these declarations on the Declarations tab of the Manifest Designer.

You can add an item template to an existing project by right-clicking the project in Solution Explorer and then clicking Add > New Item.

For info on item templates for other languages, see C#, VB, and C++ item templates.

Page Control item template

This item template contains minimal content and markup for a page in your app. The HTML markup includes a header section that includes a Back button and a main content section.

When you add a Page Control item template, Visual Studio adds 3 files to your project:

• An HTML file (named pagecontrol.html by default) that includes a header section and the main content section for your page.
• A JavaScript file that provides code that supports the page. This file includes code that supports the recommended navigation model for Windows Store apps.
• A CSS file that specifies CSS styles for the page.

The navigation model used in the Page Control item template is also used in the Hub, Grid, Split, and Navigation project templates. We recommend using this item template when you add pages to these project templates. For more info, see Navigation Model and Adding a Page Control item template.

Search Results Page item template

This item template enables an app to present a search results page for a search initiated by the Search charm. Content from your app will be included in the search results page if your app is the main app on screen, or if the user selects your app from the list of apps in the search pane.

Important  The item template for search in Microsoft Visual Studio 2013 Preview no longer implements a contract. The name of the item template has also been changed (from Search Contract).

When you add a Search Results Page item template, Visual Studio adds 3 files to your project:

• An HTML file (named searchResults.html by default) that includes a ListView control to display the search results.
• A JavaScript file that provides code that supports the search page. The source file includes code that supports the recommended navigation model for Windows Store apps.
• A CSS file that specifies CSS styles for the search page.

The navigation model used in the item template is also used in the Hub, Grid, Split, and Navigation project templates. We recommend using this item template when you add a Search Results Page to these project templates. For more info, see Navigation Model.

This item template uses a Windows Library for JavaScript template, which is based on WinJS.Binding.Template, to format and display multiple instances of data, that is, the search results. The Search Results Page displays search results in a ListView. This works much like the Windows Library for JavaScript templates used in the Grid and Split project templates. For more info, see Adding data to a project template and the "CSS styles" section in JavaScript project templates for Windows Store apps.

For more info, see QuickStart: Adding search.

File Open Picker Contract item template

The File Open Picker Contract item template enables an app to expose its data as files to other apps. For example, you can use this template to create a photo picker dialog box from which the user can pick a photo from Facebook, even if the photo isn't stored on the local hard drive.

When you add a File Open Picker Contract item template, Visual Studio adds 3 files to your project:

• An HTML file (named fileOpenPicker.html by default) that includes a ListView control to display the file list.
• A JavaScript file that provides code to handle the selection of items in the file list.
• A CSS file that specifies styles for the HTML page that contains the file list.

This item template uses a Windows Library for JavaScript template, which is based on WinJS.Binding.Template, to format and display multiple instances of data (a file list). The item template displays the file list in a ListView. This works much like the Windows Library for JavaScript templates used in the Grid and Split project templates. For more info, see Adding data to a project template and the "CSS styles" section in JavaScript project templates for Windows Store apps.

For more info about File Open Picker contracts, see Quickstart: Integrating with file picker contracts.

Share Target Contract item template

The Share Target Contract item template enables an app to coordinate data sharing among other apps. For example, you can use this template to enable users to post a photo from Flickr on Facebook. This template includes code that enables the app to receive shared content. The app that contains this item template is started when the app is selected in the share UI.

When you add a Share Target Contract item template, Visual Studio adds 3 files to your project:

• An HTML file (named shareTarget.html by default) that's displayed when the app is selected in the share UI.
• A JavaScript file that provides code to handle the shared content.
• A CSS file that specifies styles for the page.

The HTML page includes a main content section that has markup to display a minimal portion of the shared content: an IMG element for a shared thumbnail image, a title and description for shared properties, and a standard input box to enable the user to include comments when processing the shared content.

The JavaScript code uses the activated event to check whether the app is activated to receive shared data, and then uses the ShareOperation object to access shared data and set the initial template properties—the title, description, and thumbnail image. Use the onShareSubmit function in the JavaScript file to process the shared data along with the comments.

For more info on share contracts, see QuickStart: receiving shared content.

Other item templates in Visual Studio

Most of the other item templates, such as HTML Page, JavaScript File, and XML File, are standard files that don't have special features for Windows Store apps. Here's some additional info about 2 of the templates.

Resources File

To help localize a Windows Store app, you can add one or more Resources File item templates (.resjson files) to your project. For more info, see Globalizing your app.

Dedicated Worker

If you're using HTML5 Web Workers in your Windows Store app, we recommend that you include the Dedicated Worker item template in your project. This template includes a reference directive to enable IntelliSense support for the Web Worker API. For more info about using Web Workers in your Windows Store apps, see Web Workers.

Related topics

JavaScript project templates for Windows Store apps

Build date: 6/21/2013