How to opt in for toast notifications (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

0 out of 2 rated this helpful - Rate this topic

This topic explains how to specify that your app is capable of raising toast notifications.

What you need to know

Technologies

Windows Runtime

Prerequisites

A working knowledge of toast notification terms and concepts. For more information, see Toast overview.
A familiarity with the toast XML schema as well as a general familiarity with XML and its manipulation through Document Object Model (DOM)APIs. For more information, see Toast schema.

Instructions

Step 1: Declare the toast notification capability

The capability to raise toast notifications is declared in your app's package.appxmanifest file. If you use Microsoft Visual Studio Express 2012 for Windows 8, simply set the Toast Capable option to "Yes" in the Notifications section of the Application UI tab.

The following example shows the XML that is inserted in the package.appxmanifest file as a result of this option choice. The ToastCapable attribute is added to the manifest's VisualElements element.

This example also shows the what you'lll add if you are creating the package.appxmanifest file directly, outside of Visual Studio Express 2012 for Windows 8. For more information, see How to create a package manifest manually. Note that while the Visual Studio Express 2012 for Windows 8 option is "Yes", what is written to the package.appxmanifest file is "true".

XML



<VisualElements 
    ...
    ToastCapable="true">
</VisualElements>

Step 2: Declare a background and text color for your toast notifications

You can declare a background color and either light or dark text for your toast notification. Note that this setting also applies to your tiles—toast and tile notification background and text colors are always linked.

If you use Visual Studio Express 2012 for Windows 8, select the Foreground Text option in the Tile section of the Application UI tab. Set the Background Color option with a W3DC color string (for example, "#FFFFFF").

The following example shows the XML that is inserted in the package.appxmanifest file as a result of these choices. The ForegroundText and BackgroundColor attributes are added to the manifest's VisualElements element.

XML



<VisualElements 
    ...
    ForegroundText="dark" 
    BackgroundColor="#FFFFFF">
</VisualElements>

Step 3: Specify a small logo image

The app's small logo image is displayed in the lower right corner of each toast notification, to identify to the user which app has raised it.

If you use Visual Studio Express 2012 for Windows 8, set the Small Logo image path in the Tile section of the Application UI tab. Preface the path with "images\", followed by the name of the file, such as "images\smallTile-sdk.png". The specified image must be included in the app's package.

The following example shows the XML that is inserted in the package.appxmanifest file as a result of these choices. The SmallLogo attribute is added to the manifest's VisualElements element.

XML



<VisualElements 
    ...
    SmallLogo="images\smallTile-sdk.png">
</VisualElements>

Remarks

After you have completed the steps above, your app can send toast notifications to the user.

Complete example

The following example shows the full XML for a sample app's VisualElements element in its package.appxmanifest file, including the attributes discussed in this topic.

XML



<VisualElements 
    DisplayName="ToastsSample" 
    Logo="images\squareTile-sdk.png" 
    SmallLogo="images\smallTile-sdk.png" 
    Description="SDK Sample" 
    ForegroundText="dark" 
    BackgroundColor="#FFFFFF" 
    ToastCapable="true">
    <DefaultTile ShortName="ToastsSample" ShowName="allLogos"/>
    <SplashScreen BackgroundColor="white" Image="images\splash-sdk.png"/>
</VisualElements>

How to opt in for toast notifications (Windows Store apps using JavaScript and HTML)