Adding Tasks and Jumplists to Pinned Sites in IE9

September 22, 2010

4 comments

Adding Tasks and Jumplists to Pinned Sites in IE9

In a previous post I explained what is site pinning 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 redirect to my blog you can see the content format which expect 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 include 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 were very common tasks or operations can be exposed as part of the Windows taskbar.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

4 comments

  1. Sasha GoldshteinSeptember 22, 2010 ב 19:14

    Jump lists, including jump list tasks and categorized jump list destinations, are a Windows 7 feature that’s been accessible to Windows applications for quite a long time.

    It’s indeed awesome that Internet Explorer 9 pinned sites exposes the jump list API through JavaScript to pages on the web. A jump list is the whole menu that shows up when your right-click an icon on the taskbar; jump list tasks are the section of the jump list called “Tasks”; and the rest of the jump list contains jump list items, or destinations. Too bad the terms are misleadingly unaligned with the Windows 7 vocabulary.

    Reply
  2. Gil FinkSeptember 22, 2010 ב 21:58

    Thanks for your correction in the terminology Sasha.

    Reply
  3. BalaSeptember 23, 2010 ב 11:50

    Is this functionality will work with Vista OS.

    Reply
  4. Gil FinkSeptember 23, 2010 ב 12:05

    @Bala,

    You can’t pin a shortcut to the Taskbar in Windows Vista (that feature is new in Windows 7) but you can create and use pinned sites on the Start menu and the desktop of Windows Vista.

    Reply