How do you update a Pinned Site in IE9? Part 2

Pinned sites are such a cool feature, easy to implement, and they give a great themed look and feel to your website in IE9. But as soon as we implement a feature for a user, the user changes their mind or adds a new requirement. A while ago I wrote a blog describing how to update the static jump list for a pinned site. Today I’d like to show you how to update the dynamic jump list for a pinned site.

Quick aside, if you aren’t familiar with pinned sites, go to a site which implements pinning such as imdb.com , tsn.ca, or theweathernetwork.ca and drag the tab down to your taskbar to check it out. For instructions on how to pin your own site check out BuildMyPinnedSite.com. It really is easy and looks great!

The static jump list implemented with metadata is limited to 5 items and is hard coded in the HTML. A dynamic jump list can contain more than 5 entries and can be generated dynamically. For example, on my team hockey site I want to be able to quickly jump to see information on upcoming games. I would probably read this information from a database or file, but for the purposes of illustration I am simply hardcoding the values to display in my dynamic jumplist.

if (window.external.msIsSiteMode()) { 
    window.external.msSiteModeCreateJumplist("Upcoming Games");
    window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico","tab");
    window.external.msSiteModeShowJumplist();
}

This code creates a menu category called Upcoming Games and displays one item in the dynamic jump list that will open a new tab with information about the upcoming game against the Ice Monsters.

Maybe another game against the Puck Hogs is added to the schedule. So I update my code to add another item to the jump list.

if (window.external.msIsSiteMode()) {
    window.external.msSiteModeCreateJumplist("Upcoming Games");
    window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico", "tab");
    window.external.msSiteModeAddJumpListItem("Jan 11 vs PuckHogs", "./games.html?gameid=7", "./favicon.ico", "tab");
    window.external.msSiteModeShowJumplist();
}

Of course there are lots of team members who have already pinned the site to their desktop. The next time they launch the site, they see the following list.

Whoops! That is not what I was after! When the users who have already pinned my site launch my updated site, the original jump list item is still there and my code to define the jump list re-runs, the end result is not only do I get my new item added but the original item is added a second time! This is why it is important to include a call to the msSiteModeClearJumpList() method before you populate your dynamic jump list. This will reset your dynamic jump lists for anyone who has already pinned your site.

if (window.external.msIsSiteMode()) {
            window.external.msSiteModeClearJumplist();
            window.external.msSiteModeCreateJumplist("Upcoming Games");
            window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico", "tab");
            window.external.msSiteModeAddJumpListItem("Jan 11 vs PuckHogs", "./games.html?gameid=7", "./favicon.ico", "tab");
            window.external.msSiteModeShowJumplist();
        }

Now when my hockey team goes back to the site they see my updated jump list displayed correctly.

So now you cannot only pin your site with static and dynamic jump lists, you can update them as needed and be confident that even users who have already pinned your site will pick up the changes correctly.

Today’s My 5

5 Steps to create a Favicon for your site (The favicon is that little picture that appears as the icon when you pin your site, and in the search bar and tab when you are browsing the site)

1. Find a JPG or GIF file that contains an image you think will look good as an icon.
2. Visit thex-icon editor website.
3. Import your image, crop it and then export your image into a .ico file.
4. Copy the favicon.ico file to a directory that can be accessed by your web site.
5. Add the following line of code to the HTML of your web page <link rel="shortcut icon" href="favicon.ico"/> to associate the favicon with your web page.

For more detailed instructions visit BuildMyPinnedSite.com and check out the section “Create a hi-res favicon”