SharePoint 4 Developers

Additional reference guide in .NET / SharePoint Development

SocialCommentControl - html5 bug

19. January 2014 Admin Tips and Tricks, Troubleshooting (0)
This is a workaround to get the SocialCommentControl to work with Html5 in SharePoint 2013. The problem lies on a html div tag. In Html 5 self-closing tags don’t work, but this control uses it. Check how to fix it.

Hi everyone,

Nice to be back sharing my experiences with SharePoint 2013. It is been some time since my last post, this time I am posting a workaround to get the SocialCommentControl to work with Html5.

In SP2013 this control is deprecated, so I believe that’s why nothing was done to it. Once you add it to a page layout it breaks the markup.

I am talking about the control, so if you are using the SocialCommentWebpart the behaviour is the same, as it wraps up the control with webpart properties.

Googling this didn’t help, so I decided to reverse engineer the SharePoint assemblies and check the implementation. The problem lies on a html div tag. In Html 5 self-closing tags don’t work, but this control uses it, as below:

Code Snippet
  1. protected override void CreateChildControls()
  2. {
  3.     base.CreateChildControls();
  4.     if (!this.IsUPAEnabled)
  5.     {
  6.         string text = SPHttpUtility.HtmlEncode(StringResourceManager.GetString(LocStringId.SocialComment_NeedAuthenticatedMessage));
  7.         text = string.Format(CultureInfo.InvariantCulture, "<span>{0}</span>", new object[]
  8.         {
  9.             text
  10.         });
  11.         this.Controls.Add(new LiteralControl(text));
  12.         return;
  13.     }
  14.     this.Controls.Add(new LiteralControl("<div class=\"ms-socialCommentContents\" id=\"" + this.RootElementId + "\">"));
  15.     if (this.IsShowNewArea)
  16.     {
  17.         this.RenderNewArea();
  18.     }
  19.     this.RenderEditArea();
  20.     this.RenderErrorArea();
  21.     this.RenderPagingControlContainer();
  22.     this.Controls.Add(new LiteralControl("<div id=\"" + this.ClientID + "_PlaceHolder\" />"));
  23.     this.Controls.Add(new LiteralControl("</div>"));
  24. }

Line 14 displays the problem. The tag div is self-closed, which doesn’t work in html 5.

The solution for this is simple. Because there is no closing tag, by adding a div closing tag does the trick.

Create a new class, inherit from SocialCommentControl and override the method CreateChildControls() by adding this closing tag. As below:

Code Snippet
  1. public class SocialCommentHtml5Control : SocialCommentControl
  2. {
  3.     protected override void CreateChildControls()
  4.     {
  5.         base.CreateChildControls();
  6.         this.Controls.Add((Control)new LiteralControl("</div>"));
  7.     }
  8. }

That’s it. Add it to your page layout and use it on SP2013.

I hope it helps.

Cheers,

Reference:
Microsoft Forum

Click here to read the same content in Portuguese.

blog comments powered by Disqus