Alert This post is over a year old, some of this information may be out of date.

Pinning SharePoint 2010 Sites With IE9

Thanks to Katrien De Graeve for giving me the inspiration of this blog post. Last week on the HTML5 Web Camp session in Belgium, she talked about the site pinning functionality of IE9. She also recommended a jQuery plugin called ie9ify that makes site pinning integration much easier. The day after the session I started experimenting with the ie9ify plugin, and it was working as suspected.

But “easier” was not the case when I tried to implement it in SharePoint 2010. Several problems occurred, so I tried an alternative solution of adding the site pinning functionality to my SharePoint site. In this blog post I will give you a brief overview of the ie9ify with SharePoint 2010 problems, and explain my alternative solution.

The end result will be:

Show image IE9 Site Pinning with Custom Jump List
IE9 Site Pinning with Custom Jump List

Problems with ie9ify and SharePoint 2010

The first problem was the following JavaScript error: “Object doesn’t support property or method ‘ie9ify’”. This error can be solved when all the necessary scripts are moved to the bottom of the master page.

After this fix, the next problem occurred. The meta tags were not added on every page load. Maybe this has something to do with the JavaScript of SharePoint itself.

Another problem was that only the navigation button color were working.

Show image Navigation Buttons
Navigation Buttons
All the other functionality like adding links to the jump lists were not working.

Alternative site pinning solution

Because of all these problems with of implementing ie9ify with SharePoint, I started to create my own solution to make it work.

I started adding the meta tags with regular JavaScript, so that the code does not need to wait until the page is fully loaded.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
AppendToHead("application-name", document.title.toString());
AppendToHead("msapplication-tooltip", document.title.toString());
AppendToHead("msapplication-starturl", "http://" + location.host);
AppendToHead("msapplication-navbutton-color", "Orange");

function AppendToHead(name, content) {
  var headID = document.getElementsByTagName("head")[0];      
  var newMeta = document.createElement('meta');
  newMeta.name = name;
  newMeta.content = content;
  headID.appendChild(newMeta);
}

After some testing, the meta tags are added every time the page is loaded, and the site can be pinned to the taskbar.

Custom Jump lists

The next step is to create a custom jump list with all the SharePoint lists that are visible in the Quick launch.

The first thing you need to do, is to check if the site is opened in pinning mode. This can be checked with the following statement:

1
if (window.external.msIsSiteMode()) { }

After that you need can start by creating your custom jump list. To add links to the jump list, I made use of jQuery to iterate over each list item anchor element in the quick launch.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
$(function() {				
  //Clear jumplist
  window.external.msSiteModeClearJumplist();
  //Create a new jumplist
  window.external.msSiteModeCreateJumplist("SharePoint Lists");
  
  //Add links	to the jumplist			
  $('.ms-quickLaunch ul li>ul>li>a').each(function() {					
    var $el = $(this);
    window.external.msSiteModeAddJumpListItem(
      $el.text(), 
      $el.attr('href'), 
      "http://" + location.host + $('link[type^=image]').attr('href')
    );
  });
    
  //Display jumplist
  window.external.msSiteModeShowJumplist();
});

The code

This is the full code block that can be added in the head section of the master page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">        
  //Check if site is pinned
  if (window.external.msIsSiteMode()) {
    $(function() {				
      //Clear jumplist
      window.external.msSiteModeClearJumplist();
      //Create a new jumplist
      window.external.msSiteModeCreateJumplist("SharePoint Lists");
      
      //Add links	to the jumplist			
      $('.ms-quickLaunch ul li>ul>li>a').each(function() {					
        var $el = $(this);
        window.external.msSiteModeAddJumpListItem(
        $el.text(), 
        $el.attr('href'), 
        "http://" + location.host + $('link[type^=image]').attr('href')
        );
      });
      
      //Display jumplist
      window.external.msSiteModeShowJumplist();
    });
  }
  else {
    //Add meta tags
    AppendToHead("application-name", document.title.toString());
    AppendToHead("msapplication-tooltip", document.title.toString());
    AppendToHead("msapplication-starturl", "http://" + location.host);
    AppendToHead("msapplication-navbutton-color", "Orange");
  }
  
  function AppendToHead(name, content) {
    var headID = document.getElementsByTagName("head")[0];      
    var newMeta = document.createElement('meta');
    newMeta.name = name;
    newMeta.content = content;
    headID.appendChild(newMeta);
  }
</script>

End Result

Show image IE9 Site Pinning with Custom Jump List
IE9 Site Pinning with Custom Jump List
The only thing that is not working is the taskbar icon. For some reason IE9 does not take the favicon, on a custom HTML sample page with the same favicon it works correctly. If you have any advice or a solution, feel free to add a comment.

References

http://msdn.microsoft.com/en-us/library/gg131029%28VS.85%29.aspx

Updates

Site Icon: 15/04/2011

The site icon problem has something to do with the “msapplication-starturl” meta tag. If you specify a full URL or do not implement the meta tag, then the site icon works.

Show image Working Site Icon
Working Site Icon

Comments

Back to top