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:

<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:

<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:

<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):

<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:

<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.

License

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

About the Author

Gil Fink

Architect Sela Group

Israel

Member

Gil Fink is an expert in ASP.NET and Microsoft data platform and serves as a Senior Architect at SELA Group. He is a Microsoft data platform MVP and a certified MCPD Enterprise Application Developer. Gil has worked in the past in variety of positions and projects as a leading developer, team leader, consultant and more. His interests include Entity Framework, Enterprise Library, WCF, LINQ, ADO.NET and many other new technologies from Microsoft.

My technical blog: http://www.gilfink.net

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

A Technical Blog, originally posted at http://feeds.feedburner.com/GilFinkBlog

Adding Tasks and Jumplists to Pinned Sites in IE9

Type	Technical Blog
Licence	CPOL
First Posted	22 Sep 2010
Views	12,229
Bookmarked	1 time

JavascriptAll-Topics

		9,877,550 members (34,433 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Adding Tasks and Jumplists to Pinned Sites in IE9

Adding Tasks to a Pinned Site

Adding Jumplist to a Pinned Site

Summary

License

About the Author

Comments and Discussions