Click here to Skip to main content
Click here to Skip to main content

Adding Tasks and Jumplists to Pinned Sites in IE9

By , 22 Sep 2010
Rate this:
Please Sign up or sign in to vote.

In a previous post, I explained what site pinning is and how you can pin a site to Windows 7 taskbar.Adding Tasks and Jumplists to Pinned Sites in IE9 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:

Tasks Example

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:

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:

Jumplist Example

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 Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionMore JumpList Pinmemberclaudio.8821-Mar-11 7:53 
AnswerRe: More JumpList PinmemberGil Fink29-Apr-11 4:19 
GeneralHmm... PinmemberLaserson17-Feb-11 5:21 
GeneralRe: Hmm... PinmemberGil Fink18-Feb-11 3:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140421.2 | Last Updated 22 Sep 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid