{"id":268,"date":"2010-07-31T13:49:54","date_gmt":"2010-07-31T21:49:54","guid":{"rendered":"http:\/\/singchan.com\/?p=268"},"modified":"2011-10-11T14:08:26","modified_gmt":"2011-10-11T22:08:26","slug":"sharepoint-2010-fixing-the-msdn-contextual-tab-web-part-walkthrough","status":"publish","type":"post","link":"https:\/\/singchan.com\/wordpress\/2010\/07\/31\/sharepoint-2010-fixing-the-msdn-contextual-tab-web-part-walkthrough\/","title":{"rendered":"SharePoint 2010: Fixing the MSDN Contextual Tab Web Part Walkthrough"},"content":{"rendered":"

UPDATE!!!<\/strong><\/p>\n

The latest versions of the CKSDev for SharePoint 2010 include an SPI for stubbing out a contextual web part! I highly recommend that anyone coding for SP2010 to install the CKS Dev Tools!<\/p>\n

http:\/\/cksdev.codeplex.com\/<\/a><\/p><\/blockquote>\n

I haven’t had much opportunity to work with SharePoint 2010 in the past few months. However, I did get to try out the MSDN walkthrough for creating a custom web part with contextual ribbon tab recently. You can find the article here: http:\/\/msdn.microsoft.com\/en-us\/library\/ff407578.aspx<\/a><\/p>\n

In a nutshell, what’s supposed to happen is when you click on the web part, there will be a custom tab that appears in the Ribbon. It all works great for the first instance of the custom web part you place onto a page, but if you try adding a second instance of the web part, your page blows up!<\/p>\n

You’ll get the following error:
\nItem has already been added. Key in dictionary: ‘Ribbon.CustomContextualTabGroup’ Key being added: ‘Ribbon.CustomContextualTabGroup’<\/em><\/p>\n

:-\/ … looks like there wasn’t much QA done for the walkthrough. Anyways, to make a short story shorter… I posted a question on the TechNet forums<\/a> and Dallas Tester from MS did get back to me with a bunch of suggestions.<\/p>\n

Here are the changes you can make to allow for multiple instances of the custom web part to appear on the page without everything blowing up.<\/p>\n

Make the following modifications to the ContextualTabWebPart class.<\/strong><\/p>\n

Add the global ‘_added’ bool and OnInit event handler:<\/p>\n

static bool _added = false;\r\n\r\nprotected override void OnInit(EventArgs e)\r\n{\r\n base.OnInit(e);\r\n _added = false;\r\n}<\/pre>\n
Since we no longer have to get the unique component ID in the delay script, I changed DelayScript into a private string:<\/p>\n
private string delayScript = @"\r\n function _addCustomPageComponent()\r\n {\r\n  for (var i = 0; i < g_customWebPartIds.length; i++)\r\n  {\r\n    SP.Ribbon.PageManager.get_instance().addPageComponent(new ContextualTabWebPart.CustomPageComponent(g_customWebPartIds[i]));\r\n  }\r\n }\r\n\r\n function _registerCustomPageComponent()\r\n {\r\n  SP.SOD.registerSod(""CustomContextualTabPageComponent.js"", ""\/_layouts\/CustomContextualTabPageComponent.js"");\r\n  var isDefined = ""undefined"";\r\n  try\r\n  {\r\n   isDefined = typeof(ContextualTabWebPart.CustomPageComponent);\r\n  }\r\n  catch(e)\r\n  {\r\n  }\r\n  EnsureScript(""CustomContextualTabPageComponent.js"",isDefined, _addCustomPageComponent);\r\n }\r\n SP.SOD.executeOrDelayUntilScriptLoaded(_registerCustomPageComponent, ""sp.ribbon.js"");";<\/pre>\n
Modify the OnPreRender event handler:<\/p>\n
protected override void OnPreRender(EventArgs e)\r\n{\r\n base.OnPreRender(e);\r\n\r\n ClientScriptManager csm = this.Page.ClientScript;\r\n string componentId = SPRibbon.GetWebPartPageComponentId(this); \/\/ the unique component id \r\n\r\n \/\/ if this is the first instance of the custom web part,\r\n \/\/we need to add the contextual tab to the ribbon\r\n if (!_added)\r\n {\r\n  this.AddContextualTab();\r\n  _added = true;\r\n }\r\n\r\n \/\/ we need to create an array which will store the IDs of all instances of our custom web part\r\n csm.RegisterClientScriptBlock(\r\n  this.GetType(), "DeclareCustomWebPartArray", "var g_customWebPartIds = new Array();", true);\r\n\r\n \/\/ add this webpart's ID to our array\r\n csm.RegisterClientScriptBlock(\r\n  this.GetType(), "AddCustomWebPartId" + componentId, "g_customWebPartIds.push('" + componentId + "');", true);\r\n   \r\n csm.RegisterClientScriptBlock(this.GetType(), "ContextualTabWebPart", this.delayScript, true);\r\n}<\/pre>\n
If you want to verify that the correct web part is trigger the Ribbon commands, you can modify the ‘handleCommand<\/em>‘ method in ‘CustomContextualTabPageComponent.js<\/em>‘<\/strong><\/p>\n
handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence) {\r\n if (commandId === 'CustomContextualTab.HelloWorldCommand') {\r\n  alert(this._webPartPageComponentId + ' says: Hello, world!');\r\n }\r\n if (commandId === 'CustomContextualTab.GoodbyeWorldCommand') {\r\n  alert(this._webPartPageComponentId + ' says: Good-bye, world!');\r\n }\r\n}<\/pre>\n
Here’s a ZIP file of the entire solution<\/a> in case you’re too lazy to make the modifications yourself. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
UPDATE!!! The latest versions of the CKSDev for SharePoint 2010 include an SPI for stubbing out a contextual web part! I highly recommend that anyone coding for SP2010 to install the CKS Dev Tools! http:\/\/cksdev.codeplex.com\/ I haven’t had much opportunity to work with SharePoint 2010 in the past few months. However, I did get to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,134,43,135],"tags":[44,136,58,138,139,164,91,49,42,47,46,137],"class_list":["post-268","post","type-post","status-publish","format-standard","hentry","category-javascript","category-ribbon-sharepoint-development","category-sharepoint-development","category-web-part","tag-44","tag-contextual-tab","tag-custom","tag-error","tag-fix","tag-javascript","tag-js","tag-ribbon","tag-sharepoint","tag-ue","tag-user-experience","tag-web-part-2"],"_links":{"self":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":16,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/posts\/268\/revisions\/306"}],"wp:attachment":[{"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/singchan.com\/wordpress\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}