Monday, November 1, 2010

IE 9, site pinning, overlay icons and SharePoint

One of the new thing in IE 9 is the site pinning. A cool new feature that allows a users to add a tab in IE9 to the taskbar. After the tab is added to the taskbar we can, from IE 9, interact with it, like overlay icons and ther is it where SharePoint comes in, as the data provider. I create an announcements list and read the current count from it and set the overlay icons to match the count all through JavaScript.

The results of adding two list items to announcements list image

My code

This is the code in the PlaceHolderAdditionalPageHead content placeholder

  1. <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>




This is the code in the PlaceHolderMain content placeholder



  1. <span id="statusInfomation">Loading...</span>
  2. <script type="text/javascript">
  3. var loadingIcon = "/_layouts/images/jumplist/search.ico"
  4.  
  5. var getData = function()
  6. {
  7. $.getJSON("/ie9test/_vti_bin/listdata.svc/Ie9TestAnno()/$count", function (data)
  8. {
  9. if(data != 0 && data < 6)
  10. {
  11. var icon = "/_layouts/images/jumplist/num_" + data + ".ico";
  12. setOverlayIcon(icon, "Now got " + data);
  13. }
  14. else if(data == 0)
  15. {
  16. setOverlayIcon("", "Now got " + data);
  17. }
  18. });
  19. }
  20.  
  21. function setOverlayIcon(url, text)
  22. {
  23. $("#statusInfomation").html(text);
  24. if(url != "")
  25. {
  26. window.external.msSiteModeSetIconOverlay(url, text);
  27. }
  28. else
  29. {
  30. window.external.msSiteModeClearIconOverlay();
  31. }
  32. }
  33.  
  34. $(document).ready(function()
  35. {
  36. setOverlayIcon(loadingIcon, "Loading...");
  37. setInterval(getData, 5000);
  38. });
  39. </script>




In function in line 21, is where I interact with the overlay icons, pure magic :D



- Happy IE 9 coding

No comments:

Post a Comment

Post a Comment