14 Days Free Technical Video Training from WintellectNOW

  

Add IE 9 Pinned Sites, Dynamic Jump Lists & Notifications to MVC Razor Views

Tags: ASP.NET, ASP.NET MVC, Razor, IE

If you have an MVC application, why not spice it up by adding in IE 9's Pinned Site features? Pinned sites are an excellent way to keep links to your site handy as well as provide notifications and interact with the users. Adding pinned site capabilities to your app is also very easy to do, so it's low effort, high reward.

Add pinned sites to partial views.

Pinned sites work because of a set of <meta> tags that IE 9 recognizes to produce an integration point with the desktop - the pinned site. The <meta> tags that need to be added as page markup should be in a single location, making it easier to maintain by keeping in tune with DRY principles (yes, DRY works with markup too!). Adding the <meta> tags below to a partial view fits this requirement nicely.

<meta name="application-name" content="Fourth Coffee"/>
<meta name="msapplication-tooltip" content="Welcome to Fourth Coffee, home of delicious goodies"/>
<meta name="msapplication-starturl" content="http://localhost:22591"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="beige"/>
<meta name="msapplication-task" content="name=Like us on Facebook;
action-uri=http://www.facebook.com/#!/pages/Fourth-Coffee-Bakery/207583555919352;
icon-uri=/Content/Images/facebook.ico" />
 
<link rel="shortcut icon" type=image/x-icon href="@Url.Content("~/Content/Images.favicon-pie.ico")" />
<link rel=icon type=image/ico href="@Url.Content("~/Content/Images.favicon-pie.ico")" />

The first several <meta> tags set the overall pinned site properties such as the startup URL, window size, and custom navigation button coloring, that will run when once a user pins the site. The last <meta> item, a jump list task, directs users to "like" the Fourth Coffee fan Facebook page. Additionally, since you're adding the <meta> tags to views you can use Html helpers and other MVC components such as @Url.Content inside the <meta> tags.

Since the goal is to include this partial view everywhere on the site for easy access to pinning, it needs to be included in the site layout page (\Views\Shared\_Layout.cshtml), causing the pinned site code to render in all views in the application.

Rendering the partial view containing pinned site elements.

In the layout page add the call to @Html.Partial anywhere between the <head> tags, but after the <script> tag that references the jQuery core library. The call to @Html.Partial renders the content from the _BakeryJumplist partial view into each view that uses the layout page.

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script>
    @Html.Partial("_BakeryJumplist")
</head>

This is all you need to do to deliver a basic pinned site to your users.

Keep in mind that a user must first pin the site before accessing any of the commands from the jump lists. This is easy enough to do just by dragging the tab of the site you want to pin from IE 9 to the Windows 7 taskbar. The user can then access the pinned site's jump list exactly the same as Windows 7 apps do, via the right mouse button.

Here's what it will look like this in the windows taskbar, once it's pinned by the user.

image

Now that you have a basic pinned site, you'll want to dynamically add items to the jump list so your users can interact with your site, and receive notifications without having to proactively visit your site to check for updates.

Adding jump list items dynamically to the pinned site.

Using JavaScript, you can add items to the jump list dynamically. In the case of the Bakery sample, daily & weekly bakery specials will work just fine.

You can place the script in any file you want, i.e., the layout page or the pinned site partial view. However it's best if you place the code in its own .js file or a .js file library. The goal of this script is to do the following:

  • Verify IE9 is running as a pinned site. If so...
    • Add a jump list group to the jump list. One or more groups are required before adding your own items.
    • Add jump list items to the jump list group.

You can accomplish this by adding the code below to the jQuery ready function. Alternatively, you could tap into the window.load event, as that will work as well.

$(function () {
    var faviconPath = "/Content/Images/";
    var externalWindow = null;
 
    if (window.external.msIsSiteMode()) {
        externalWindow = window.external;
        externalWindow.msSiteModeCreateJumpList("Fourth Coffee!");
        externalWindow.msSiteModeAddJumpListItem("Weekly Specials""/Specials/Weekly", faviconPath + "favicon-pie.ico");
        externalWindow.msSiteModeAddJumpListItem("Daily Deals""/Specials/Daily", faviconPath + "favicon-cupcake.ico");
        // TODO Add notifications to site
    }
});

The JS code looks at the window.external object of IE 9 to first check the if the msIsSiteMode property of the widow.external object is true. If true, we know that the site is running as a Pinned Site (or Site Mode Application, as the property name implies). A site runs as a pinned site after the user has pinned it to the taskbar. Once pinned, your application is then free to now dynamically interact with the user by adding/removing tasks or sending notifications to the taskbar.

Here's the pined site with the daily and weekly specials.

image

The pinned site now behaves just like a Windows 7 desktop app, except it runs in the browser. That leaves one thing left to spice up our site; and that's notifications.

Notifications: Interacting with the user.

Working with the previous code, replace the existing // TODO (Add notifications to site) comment with following code:

setTimeout(function () {
    window.external.msSiteModeSetIconOverlay(faviconPath + "favicon-info.ico""FourthCoffee News");
}, 5000);

This code creates a simple five second timeout that overlays a notification icon on the taskbar icon. This lets the user know that there's news online at Fourth Coffee, enticing them to revisit the site.

image

Although a very basic sample, you can easily imagine this code being much more complex. You could make AJAX/jQuery calls to web services to dynamically add/remove tasks, or manipulate jump list items to display different links & messages. Each time the user interacts with your jump list, their experience with your app could be more interactive.

Summary & Code

Getting information to your users is important, and the ability to hand deliver those messages to their taskbar in a timely manner creates a positive competitive edge for your site. It doesn't take a lot of effort to add some really great features to your site, hopefully to drive more traffic and provide timely information to your users. For a small amount of code, you get a lot in return.

Resources:

IE 9 Guide for Developers: Home

IE 9 Guide for Developers: Pinned sites

Enter your pinned site in the IE 9 {Dev:unplugged} contest to compete to win up to 40k in prizes!

dev_contest_landing_logo

Code:

Download the code

8 Comments

  • Michael Herndon said

    does calling window.external.msIsSiteMode() work in all browsers? (I'm guessing it might not due to the ms prefix).

    It would be wise try to implement code that tests to see if functionality exists in the current browser if the code is browser specific.

    i.e.

    // (this probably needs to be tested that it evaluates as intended, but...
    if(window.external && window.external.msIsSiteMode && window.external.msIsSiteMode()) {
    // do something.
    }

  • Rachel said

    Michael,

    No sir, it's just an IE feature. I agree, it would be good to double check the browser for this feature.

    Most of the others (Chrome & FF specifically) just ignore the script.

  • Addam said

    Great article! I too have created an article about this same thing. Worked with Microsoft and foxsports.com to develop theirs. Here is a link to the article and there's a script I developed for Fox to help them add this easily and dynamically to their site. It's kinda neat.

    Tell me what you think! <a href="http://devcrapshoot.com/html-css/ie9-pinning-feature" target="_blank">http://devcrapshoot.com/html-css/ie9-pinning-feature</a>

    Cheers!

  • moncler said

    No sir, it's just an IE feature. I agree, it would be good to double check the browser for this feature.

    Most of the others

  • rahul verma said

    Your article definitely worth looking through. I recently found the application well written and then quickly logical. I must personally we appreciate the time you devote to create the application. I’m sure very pleased in addition to lose time waiting for your blog post.

  • hekky said

    In my system, the window.external.msSiteModeXXXX is always undefined, do you know why??

  • Rachel said

    Hekky,

    msSiteMode = true when launched from a pinned state and false if not, it should not come across as undefined, however it is possible for browsers other than IE to show it as null.

Comments have been disabled for this content.