How to add IE9 pinning Tasks and Jumplists to your site

Posted on
By Addam Driver

Microsoft launched Internet Explorer 9 not too long ago. With that launch if you have Windows Vista or above, you have this neat functionality called “Pinning”. Basically a user can take your site, pin it to the Windows tool bar and it creates what they call a “jump list”.

The Jump list consists of links of information controlled by the site and updates (if the site is open) dynamically. They also included a “Task List” which consists of 5 (MAX) information links that are not dynamic.

Since Micorsoft’s documentation is all over the place, I’ve decided to learn all I can about it and create some useful tools on creating jump list dynamically. Lets get into the code!

First we need META TAGS to kick it off.

<link rel="shortcut icon" href=" [your Logo Here] " /> <!-- set the image icon for the pinned application -->
<meta name="application-name" content=" [app name] " /> <!-- Set the application name for the OS -->
<meta name="msapplication-tooltip" content=" [Tool tip message] " /> <!-- Set the tool tip for when users mouse over the Icon -->
<meta name="msapplication-window" content="width=1024;height=768" /> <!-- application window size when open by pin -->

So! Now that we’ve got the code to kick it off, let’s add some links to the task list. They give a max of 5 and if you go over that, it will freak out and not work as expected. Here’s the code:

<meta name="msapplication-task"
              content="name= [task 1 name];
              action-uri= [task 1 url]
              icon-uri=[task 1 icon]" />
        <meta name="msapplication-task"
              content="name= [task 2 name];
              action-uri= [task 2 url]
              icon-uri=[task 2 icon]" />
        <meta name="msapplication-task"
              content="name= [task 3 name];
              action-uri= [task 3 url]
              icon-uri=[task 3 icon]" />
        <meta name="msapplication-task"
              content="name= [task 4 name];
              action-uri= [task 4 url]
              icon-uri=[task 4 icon]" />
        <meta name="msapplication-task"
              content="name= [task 5 name];
              action-uri= [task 5 url]
              icon-uri=[task 5 icon]" />

WELL ALRIGHT! Now that we have our meta tags and task list together, let’s look create a jump list. So I went over all their documentation and I wasn’t convinced on some of their methods. So I created a simple javascript function that will let you create/update your jump list with ease. Let’s DO IT!

*NOTE This next section is just an explanation of the code. You can download the COMPLETE JS CODE HERE.

NEXT! we need a quick check to make sure the browser supports pinning. This should be ran when the page loads

<script type="text/javascript>
<!--//
if (window.external.msIsSiteMode()) { // check the browser supports pinning
	var isPinned = window.external.msIsSiteModeFirstRun(false);  // get first run set
	var _pin = null; // set the pin holder
        if(isPinned == 0){  // if not first run and page has been pinned
		postMyList(options);  // update jump list
	}
}
//-->
</script>

ALMOST DONE! So now the check is in place. Here is the code to pump out jump lists. You can copy and paste this as is on your page or an external javascript file.

<script type="text/javascript>
<!--//
function postMyList(options){  // used to update/create jump list... can be ran seperately

	var options = options || {}; // setup the options
	var notify = options.notify || false;  // to notify the user that the list has been updated.
	
	_pin = window.external;  // get a handle to the external window		            
	_pin.msSiteModeClearIconOverlay();   // clear the icon overlay if any		
	_pin.msSiteModeClearJumpList();  // clear previous jump list

	if(keepMePosted != null){ // if keepMePosted has been declared by the developer already
		_pin.msSiteModeCreateJumpList( keepMePosted.header );   // create a header for jump list
		for(var a=10; a>-1; a--){ // grab from the 10th item and count backwards to put the top Header at the top
			if(keepMePosted.data[a]){ // loop throught he headlines
				var jTitle = keepMePosted.data[a].title;  // get the anchor title
				var jPage = keepMePosted.data[a].page;   // get the url
				var jImage = keepMePosted.data[a].image;   // set the image
				_pin.msSiteModeADdJumpListItem(jTitle,jPage,jImage );  // Add the item to the jump list
			}			
		}
		_pin.msSiteModeShowJumplist();  // Show updates to the Jump List.
	}

	if(notify == true){ // if the user is to be notified of update on the desktop

		var icon = (keepMePosted.iconOverlay) ? keepMePosted.iconOverlay : '';   // if there's no icon kill notification

		var desc = (keepMePosted.iconOverlayDesc) ? keepMePosted.iconOverlayDesc : " [Update Message Here] ";   // if ther'es a description, show it if not, show default text

		_pin.msSiteModeActivate(); // activate the site mode *blink*
		_pin.msSiteModeSetIconOverlay(icon, desc); // call iconOverlay		}
	}
 }
//-->
</script>

SET IT UP! OK! Now that we have all of the “functionality” in place, let’s setup the object. This is very basic. Setup the object of data that you want to show in the tool bar, then call the function to update the users desktop.

<script type="text/javascript">
<!--//
keepMePosted = {
	header: " [List Header] ",
	data: [
		{title: "JumpListTitle1", image: "imageURL", page : "pageURL"},
		{title: "JumpListTitle2", image: "imageURL", page : "pageURL"},
		{title: "JumpListTitle3", image: "imageURL", page : "pageURL"}
	],
	iconOverlay : "imageURL (ABSOLUTE URL)",
	iconOverlayDesc : "overlay text description"
};
/* use this code to set/update the list when the object is ready */
postMyList(); // this is to update the list with the new object data
// postMyList({notify: true}); // use this to show an update to the users browser

//-- >
</script>

So now that you’ve got it all setup. Have fun and RUN!

Again, you can DOWNLOAD THE COMPLETE JS CODE HERE.

Cheers!

Tags: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

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=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA