Adding A Dynamic JumpList to My Site’s Pinned Application in IE9

Earlier this week, I explained how you could easily add an Internet Explorer 9 pinned site mode to your website so that your site behaves like a first-class application when running on Windows Vista or Windows 7.  I also explained how you might use a Google Analytics service to track when the your site is launched from a pinned icon.  Now I’m going to show you how to add dynamic content to a JumpList that shows up in the site mode icon.  For my site, which contains a personal blog using Graffiti CMS, I can write some template code that will be used in each page.  Graffiti CMS has its own simple template  code which lets me iterate through each post on the page and for each post, I add a JumpList item.  I use the $post.Title, $post.Url for each item and call the window.external.MsSiteModeAddJumpListItem() method for each item.  Also note how I used try/catch and checked for the site mode feature using if (window.external.msIsSiteMode).  See the full code template below the image to see what I wrote – if use something other than Graffiti CMS like Wordpress, then they syntax would obviously be slightly different for iterating through each of the blog posts.

You can see the end result on https://charette.com once you pin the site – by dragging the Charette.com tab from the IE9 beta to the task bar in Windows Vista or Windows 7. To read more about IE9 pinning and what else you can do now with Internet Explorer 9, go to the Internet Explorer Developer Center on MSDN.

     <script language="javascript">

    function AddJumpList()
    {
        try
        {
                if (window.external.msIsSiteMode())
                {
                    window.external.msSiteModeCreateJumplist("Posts");
  
                    #foreach($post in $posts)
                    window.external.msSiteModeAddJumpListItem("$post.Title", 
                         “https://charette.com$post.Url?utm_source=windows&utm_medium=sitemode&utm_campaign=IE9”, 
                         "https://charette.com/favicon.ico");

                    #end

                    window.external.msSiteModeShowJumplist();
                }
        }
        catch (error)
        {
        }
    }

    AddJumpList();

    </script>