Share via


Windows Store App Tile Update Templates – Push Notifications

Background

 

There are a large number of templates available for you to use when updating the tile for your Windows Store App from a cloud service using the Windows Push Notification Service. This post contains information about every template you can use (name, picture, description), as well as cut-and-paste code to create the tile. All you need to do is fill in the information fields with whatever you want! In this case, the templates are written in JavaScript you can cut and paste into scripts in Azure Mobile Services.

Each template consists of a call to push.wns.sendTile*(channel, payload, options). For more information and an example of how to do this in the context of an app and cloud service, see the following Azure Mobile Services introduction, and the introduction to push notifications using Azure Mobile Services.

 

The Templates

 

TileSquareBlock

One short string of large block text over a single, short line of bold, regular text.

image_thumb4

push.wns.sendTileSquareBlock(channel.uri, {     text1: 'block text',     text2: 'bold text' });

 

 

TileSquareText01

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

image_thumb5 

push.wns.sendTileSquareText01(channel.uri, {     text1: 'header text',     text2: 'text1',     text3: 'text2',     text4: 'text3' });

 

 

TileSquareText02

One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.

image_thumb6 

push.wns.sendTileSquareText02(channel.uri, {     text1: 'header text',     text2: 'wrap text' });

 

 

TileSquareText03

Four strings of regular text on four lines. Text does not wrap.

image_thumb7 

push.wns.sendTileSquareText03(channel.uri, {     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4' });

 

 

TileSquareText04

One string of regular text wrapped over a maximum of four lines.

image_thumb8 

push.wns.sendTileSquareText04(channel.uri, {     text1: 'wrap text' });

 

 

TileSquareImage

One square image that fills the entire tile, no text.

image_thumb9 

push.wns.sendTileSquareImage(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text' });

 

 

TileSquarePeekImageAndText01

Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap.

image_thumb10 

push.wns.sendTileSquarePeekImageAndText01(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'text1',     text3: 'text2',     text4: 'text3' });

 

 

TileSquarePeekImageAndText02

Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.

image_thumb11 

 

push.wns.sendTileSquarePeekImageAndText02(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'wrap text' });

 

TileSquarePeekImageAndText03

Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap.

image_thumb12 

push.wns.sendTileSquarePeekImageAndText03(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4' });

 

 

TileSquarePeekImageAndText04

Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines.

image_thumb13 

push.wns.sendTileSquarePeekImageAndText04(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWideText01

One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

image_thumb14 

push.wns.sendTileWideText01(channel.uri, {     text1: 'header text',     text2: 'text1',     text3: 'text2',     text4: 'text3',     text5: 'text4' });

 

 

TileWideText02

One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.

image_thumb15 

push.wns.sendTileWideText02(channel.uri, {     text1: 'header text',     text2: 'text1',     text3: 'text2',     text4: 'text3',     text5: 'text4',     text6: 'text5',     text7: 'text6',     text8: 'text7',     text9: 'text8' });

 

 

TileWideText03

One string of large text wrapped over a maximum of three lines.

image_thumb16 

push.wns.sendTileWideText03(channel.uri, {     text1: 'wrap text' });

 

 

TileWideText04

One string of regular text wrapped over a maximum of five lines.

image_thumb17 

push.wns.sendTileWideText03(channel.uri, {     text1: 'wrap text' });

 

 

TileWideText05

Five strings of regular text on five lines. Text does not wrap.

image_thumb18 

push.wns.sendTileWideText05(channel.uri, {     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4',     text5: 'text5' });

 

 

TileWideText06

Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.

image_thumb20 

push.wns.sendTileWideText06(channel.uri, {     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4',     text5: 'text5',     text6: 'text6',     text7: 'text7',     text8: 'text8',     text9: 'text9',     text10: 'text10' });

 

 

TileWideText07

One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.

image_thumb21 

push.wns.sendTileWideText07(channel.uri, {     text1: 'header text',     text2: 'label1',     text3: 'text1',     text4: 'label2',     text5: 'text2',     text6: 'label3',     text7: 'text3',     text8: 'label4',     text9: 'text4' });

 

 

TileWideText08

Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.

image_thumb22 

push.wns.sendTileWideText08(channel.uri, {     text1: 'label1',     text2: 'text1',     text3: 'label2',     text4: 'text2',     text5: 'label3',     text6: 'text3',     text7: 'label4',     text8: 'text4',     text9: 'label5',     text10: 'text5' });

 

 

TileWideText09

One header string in larger text over one string of regular text wrapped over a maximum of four lines.

image_thumb23 

push.wns.sendTileWideText09(channel.uri, {     text1: 'header text',     text2: 'wrap text' });

 

 

TileWideText10

One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.

image_thumb24 

push.wns.sendTileWideText10(channel.uri, {     text1: 'header text',     text2: 'label1',     text3: 'text1',     text4: 'label2',     text5: 'text2',     text6: 'label3',     text7: 'text3',     text8: 'label4',     text9: 'text4' });

 

 

TileWideText11

Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.

image_thumb25 

push.wns.sendTileWideText11(channel.uri, {     text1: 'label1',     text2: 'text1',     text3: 'label2',     text4: 'text2',     text5: 'label3',     text6: 'text3',     text7: 'label4',     text8: 'text4',     text9: 'label5',     text10: 'text5' });

 

 

TileWideImage

One wide image that fills the entire tile, no text.

image_thumb26 

push.wns.sendTileWideImage(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text' });

 

 

TileWideImageCollection

One large square image with four smaller square images to its right, no text.

image_thumb27 

push.wns.sendTileWideImageCollection(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image2alt: 'alt text1',     image3src: 'image2.png',     image3alt: 'alt text2',     image4src: 'image3.png',     image4alt: 'alt text3',     image5src: 'image4.png',     image5alt: 'alt text4' });

 

 

TileWideImageAndText01

One wide image over one string of regular text wrapped over a maximum of two lines.

image_thumb28 

push.wns.sendTileWideImageAndText01(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWideImageAndText02

One wide image over two strings of regular text on two lines. Text does not wrap.

image_thumb29 

push.wns.sendTileWideImageAndText02(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'text1',     text2: 'text2' });

 

 

TileWideBlockAndText01

Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.

image_thumb30 

push.wns.sendTileWideBlockAndText01(channel.uri, {     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4',     text5: 'block text',     text6: 'bold text' });

 

 

TileWideBlockAndText02

One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.

image_thumb31 

push.wns.sendTileWideBlockAndText02(channel.uri, {     text1: 'wrap text',     text2: 'block text',     text3: 'bold text' });

 

 

TileWideSmallImageAndText01

On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

image_thumb32 

push.wns.sendTileWideSmallImageAndText01(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWideSmallImageAndText02

On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.

image_thumb33 

push.wns.sendTileWideSmallImageAndText02(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text',     text2: 'text1',     text3: 'text2',     text4: 'text3',     text5: 'text4' });

 

 

TileWideSmallImageAndText03

On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.

image_thumb34 

push.wns.sendTileWideSmallImageAndText03(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWideSmallImageAndText04

On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

image_thumb35 

push.wns.sendTileWideSmallImageAndText04(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWideSmallImageAndText05

On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.

image_thumb36 

push.wns.sendTileWideSmallImageAndText05(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWidePeekImageCollection01

Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text over one string of regular text wrapped over a maximum of four lines.

image_thumb37 

push.wns.sendTileWidePeekImageCollection01(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWidePeekImageCollection02

Top: One large square image with four smaller square images to its right, no text. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

image_thumb38 

push.wns.sendTileWidePeekImageCollection02(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     text1: 'header text',     text2: 'text1',     text3: 'text1',     text4: 'text1',     text5: 'text1' });

 

 

TileWidePeekImageCollection03

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of large text wrapped over a maximum of three lines.

image_thumb39 

push.wns.sendTileWidePeekImageCollection03(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     text1: 'wrap text' });

 

 

TileWidePeekImageCollection04

Top: One large square image with four smaller square images to its right, no text. Bottom: One string of regular text wrapped over a maximum of five lines.

image_thumb40 

push.wns.sendTileWidePeekImageCollection04(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     text1: 'wrap text' });

 

 

TileWidePeekImageCollection05

Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

image_thumb41 

push.wns.sendTileWidePeekImageCollection05(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     image6src: 'small image.png',     image1alt: 'small alt text',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWidePeekImageCollection06

Top: One large square image with four smaller square images to its right, no text. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

image_thumb42 

push.wns.sendTileWidePeekImageCollection06(channel.uri, {     image1src: 'large image.png',     image1alt: 'large alt text',     image2src: 'image1.png',     image1alt: 'alt text1',     image3src: 'image2.png',     image1alt: 'alt text2',     image4src: 'image3.png',     image1alt: 'alt text3',     image5src: 'image4.png',     image1alt: 'alt text4',     image6src: 'small image.png',     image1alt: 'small alt text',     text1: 'wrap text' });

 

 

TileWidePeekImageAndText01

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

image_thumb43 

push.wns.sendTileWidePeekImageAndText01(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWidePeekImageAndText02

Top: One wide image. Bottom: Five strings of regular text on five lines. Text does not wrap.

image_thumb44 

push.wns.sendTileWidePeekImageAndText02(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'text1',     text2: 'text2',     text3: 'text3',     text4: 'text4',     text5: 'text5' });

 

 

TileWidePeekImage01

Top: One wide image. Bottom: One header string in larger text over one string of regular text that wraps over a maximum of four lines.

image_thumb45 

push.wns.sendTileWidePeekImage01(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWidePeekImage02

Top: One wide image. Bottom: One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.

image_thumb46 

push.wns.sendTileWidePeekImage02(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'header text',     text2: 'text1',     text3: 'text2',     text4: 'text3',     text5: 'text4' });

 

 

TileWidePeekImage03

Top: One wide image. Bottom: One string of large text wrapped over a maximum of three lines.

image_thumb47 

push.wns.sendTileWidePeekImage03(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWidePeekImage04

Top: One wide image. Bottom: One string of regular text wrapped over a maximum of five lines.

image_thumb48 

push.wns.sendTileWidePeekImage04(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     text1: 'wrap text' });

 

 

TileWidePeekImage05

Top: One wide image. Bottom: On the left, one small image; on the right, one header string of larger text on the first line over one string of regular text wrapped over a maximum of four lines.

image_thumb49 

push.wns.sendTileWidePeekImage05(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     image2src: 'small image.png',     image1alt: 'small alt text',     text1: 'header text',     text2: 'wrap text' });

 

 

TileWidePeekImage06

Top: One wide image. Bottom: On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.

image_thumb50 

push.wns.sendTileWidePeekImage06(channel.uri, {     image1src: 'image.png',     image1alt: 'alt text',     image2src: 'small image.png',     image1alt: 'small alt text',     text1: 'wrap text' });