IE9: Changes to Jump Lists, some good and some great

  • Article

I like IE9 site pinning! I really think that if a site takes advantage of this, IE9 users will be that site’s most valuable customers to acquire. Part of the site pinning story is “dynamic jump lists”, which sit on the foundation provided by Windows 7.

Living through the IE9 Beta, we all became used to jump list items creating a new tab. Well, there’s a change to note. Static items (meta elements) and dynamic items (added by JavaScript) have an additional parameter, window-type. From several MSDN references, this optional item is signaled by:

window-type= (one of the following values)

  • tab (default) — a new tab in the current window
  • self — the current tab
  • window — a new pinned site window

So, step out and consider what you might do with self.

In-place Navigation from the Jump List

One thing that wasn’t apparent to me, and that I’ve not read anywhere – using self, not only does it execute in the same tab, it can also avoid the postback (i.e. no trip back to the server to redraw the screen required) if done properly. That’s cool! All you have to do is make a URL with a hash tag, just like you were jumping to an anchor on the page. (Thanks Chewy for the lesson. Please post to him and ask him to blog, as he has many great lessons on site pinning.) Anyway, this is a powerful twist on jump lists – and is a requirement for some sites. Now, you can have “in-place navigation” as Chewy would call it. It even works for static jump lists, as well as dynamic jump lists.

Here’s an example of a static jump list item, using SELF, and acting in / on the same page. The anchor doesn’t have to exist either, and you could use this to react with a UI update. You could register for the hashChange event, and do your update work there.

    1: <meta 
    2:     name="msapplication-task" 
    3:     content="name=Your Menu Item Text;action-uri=#anchorOnYourPage;icon-uri=favicon.ico;self" 
    4:     />
    5: 

If you leave out the hash, you will do a full postback. You can also hit the same page with just a hash tag.

Here is an example of a dynamic jump list menu item addition:

    1: window.external.msSiteModeAddJumpListItem(
    2:     "Jon",              // menu text
    3:     "#SomeAnchorValue", // url to jump to
    4:     "favicon.ico",      // menu icon
    5:     "self");            //the start of the secret sauce recipe

 

Couple of Other Notes

Check out msIsSiteModeFirstRun. If you have a scheme that needs to know, now you can.

    1: if (window.external.msIsSiteModeFirstRun(false) > 0)
    2:     createDynamicJumpList();

And there are times when you need to know that it’s NOT first run – like when updating jump lists.

Creating The Dynamic Jump List

Also of note, msSiteModeCreatJumpList has a subtle change – but one that I provided feedback on, and the IE Team did not disappoint. Everyone knows that calling this is the beginning of creating the dynamic jump list and that this function specifically sets the header text on the jump list menu. In lots of cases, people call this function repeatedly with the same heading text. In the beta, calling this function always reset the list. In most cases, you don’t want this because if you have a rolling or incremental menu item addition scheme, you really only wanted to make sure the heading existed (i.e. you can’t add items until this function is called once). So, now in the RC and rolling into RTW, calling with the same heading is not destructive.  Here’s the important text: The list is cleared only if the name provided in the bstrHeader parameter is different from the current list.

This leads to another issue though. If you have a rolling scheme (where you just add items over time, like newspaper headings), you know that older items will roll off the list when it reaches capacity. Did you know that you can register for an event that lets you know when these items roll off. The important text: If necessary, you can call msSiteModeClearJumpList to start a new list; however, doing so prevents the onmssitemodejumplistitemremoved event from being raised.

Some Good Guidance and Samples

IE9 Samples and Tutorials – CSS3, Debugging, Geolocation, HTML5 Audio and Video, HTML5 Graphics, and Pinned Sites. Excellent walkthrough for site pinning.

I can’t wait until the launch to see how people are leveraging site pinning.