Adding Tasks and Jumplists to Pinned Sites in IE9

Gil Fink

5.00/5 (2 votes)

22 Sep 2010CPOL2 min read

25.7K

Adding Tasks and Jumplists to Pinned Sites in IE9

In a previous post, I explained what site pinning is and how you can pin a site to Windows 7 taskbar. In this post, I’m going to explain how to add tasks and jumplists to the pinned site from the previous post example.

Adding Tasks to a Pinned Site

When we pin a site to the Windows 7 taskbar, we can include tasks to operate on the pinned site. With this feature, you can add tasks for common behavior of your site. For example, in a library site you can add a task to redirect to the last borrowed book page to help the user or a task for seeing the list of books available in the library.

So how do I achieve the tasks behavior? This is easy – use the new meta tag msapplication-task at the head of the web page. The msapplication-task has a content format of three parameters:

name – The name of the task
action-uri – The link to perform when that task is clicked
icon-uri – The link for the icon to show beside the task

This is an example of a task that redirects to my blog. You can see the content format which expects the parameters to be comma delimited:

HTML

<meta name="msapplication-task" content="name=My Blog;action-uri=
	http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />

Here is the new head of the previous post example which includes two new tasks:

HTML

<head runat="server">
    <title>My application</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    
    <meta name="application-name" content="My Application" />
    <meta name="msapplication-tooltip" content="My Application" />
    <meta name="msapplication-starturl" content="./" />
    <meta name="msapplication-task" content="name=My Blog;
	action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />
    <meta name="msapplication-task" content="name=My Linkedin Profile;
	action-uri=http://il.linkedin.com/in/gilfink;
	icon-uri=http://www.linkedin.com/favicon.ico" />
</head>

Here is how it will be shown after the site pinning:

Adding Jumplist to a Pinned Site

When we want to add Jumplist functionality to the pinned site, we should be familiar with the Jumplist API that is available in IE9. This API enables the creation, update, show and clear of a Jumplist. This API includes four Javascript methods:

msSiteModeCreateJumplist – creates a new Jumplist
msSiteModeAddJumplistItem – adds an item to the Jumplist
msSiteModeShowJumplist – shows the created Jumplist
msSiteModeClearJumplist – clears the Jumplist

Here is an example for a function that creates a simple Jumplist with one item:

JavaScript

<script type="text/JavaScript">
    function AddJumpList() {
        window.external.msSiteModeCreateJumplist('My Favorite Sites');
        window.external.msSiteModeAddJumpListItem
		('About Page', '/About.aspx', '/favicon.ico');
        window.external.msSiteModeShowJumplist();
    }
</script>

In the example, I’ve put this function in the head of the application master page (of course, it should be a part of an external JS file):

HTML

<head runat="server">
    <title>My application</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    
    <meta name="application-name" content="My Application" />
    <meta name="msapplication-tooltip" content="My Application" />
    <meta name="msapplication-starturl" content="./" />
    <meta name="msapplication-task" content="name=My Blog;
	action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />
    <meta name="msapplication-task" content="name=My Linkedin Profile;
	action-uri=http://il.linkedin.com/in/gilfink;
	icon-uri=http://www.linkedin.com/favicon.ico" />
    <script type="text/JavaScript">
        function AddJumpList() {
            window.external.msSiteModeCreateJumplist('My Favorite Sites');
            window.external.msSiteModeAddJumpListItem
		('About Page', '/About.aspx', '/favicon.ico');
            window.external.msSiteModeShowJumplist();
        }
    </script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

In the home web page of the application, I added this script which uses the msIsSiteMode to check whether the site is pinned and if so, call the AddJumpList function from the previous master page example:

JavaScript

<script type="text/javascript">
    if (window.external.msIsSiteMode()) {
        AddJumpList();
    }
</script>

Here is the pinned site with the added Jumplist:

Summary

In the post, I showed how you can add tasks and Jumplists to your web application using simple things like meta tags and JavaScript functions. This ability adds to the user experience with IE9 where very common tasks or operations can be exposed as part of the Windows taskbar.

CodeProject

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)