IE Pinned Sites Part 4: How to implement Jump List Tasks
In yesterday’s post, we saw how to implement site properties in pinned sites. Today, we will learn to implement Jump List Tasks, which (like the site properties that we looked at yesterday) will apply to anyone who visits the site.
Jump List Tasks are implemented using meta tags in the head block of your HTML. You must specify a name of “msapplication-task” and a content attribute that contains a trifecta of information:
- name – This is the name of the task which is displayed to the user in the Jump List.
- action-uri – This URI is the destination that the user will be taken to when the Jump List task is clicked.
- icon-uri – This URI is a pointer to an icon (*.ico file) that will be displayed to the left of the task name in the Jump List.
Both of the URIs can be absolute or relative. For the action-uri, any destination is valid; this is not bound to the domain of the webpage like the Start URL property.
Putting this all together, here is what a single Jump List task might look like in your HTML:
<meta name="msapplication-task" content="name=Locations;
action-uri=https://www.windowsdevbootcamp.com/Location.aspx;
icon-uri=https://www.windowsdevbootcamp.com/favicon.ico"/>
In the Jump List, this task will look like the first task below:
When you click on the “Locations” task, you will be taken to https://www.windowsdevbootcamp.com/Location.aspx. The little Windows-like icon next to the “Locations” task was pulled in from https://www.windowsdevbootcamp.com/favicon.ico (the icon-uri).
Now, let’s look at a real-life example from a popular website. Navigate to CNN in Internet Explorer 9. Pin the site and right-click on its taskbar icon. You will see a Jump List like this, with 3 tasks:
You can view the source on this website by pressing F12 to bring up the developer tools. (Make sure that your IE browser window has focus when you press F12. You can also access the developer tools from the Tools menu, represented by a little “gear” icon in the upper right-hand corner of your browser window, and then click “F12 developer tools”.)
When the developer tools are launched, you will see a screen like this:
Expand the plus sign next to the html, and then expand the head section. In the head section, you will see the 3 meta tags that are enabling the tasks:
One last fun fact about Jump List tasks: there is a limitation on the number of Jump List tasks that you can create on a pinned site. A maximum of 5 tasks is allowed.
Stay tuned for the next blog post, when we’ll take a look at dynamic Jump Lists.
Other Blog Posts in this Series
IE Pinned Sites Part 1: What Are Pinned Sites?
IE Pinned Sites Part 2: Why Implement Pinned Sites?
IE Pinned Sites Part 3: How to implement basic site properties
IE Pinned Sites Part 4: How to implement Jump List Tasks
IE Pinned Sites Part 5: How to implement dynamic Jump List Categories
IE Pinned Sites Part 6: How to implement Overlay Icons
IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons
IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button
IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers