Sunday, October 19, 2014

Add Comments and Ratings to a SharePoint 2013 Page Layout Using Design Manager

Erik Abderhalden

At this point in SharePoint development you probably identify as either old school, or new school. But at some point, the old schoolers need to come correct and do stuff the new school way. In this post I'll show you the new school way to add comments and ratings to a SharePoint 2013 page layout using Design Manager.

To do this in SharePoint 2010, you'd add a C# declaration at the top of the page layout, then throw in some server controls and bam! Your page just got a whole lot more social. This approach still works in SharePoint 2013 if you create your page layouts using SharePoint Designer. This is old school.

With the release of SharePoint 2013, Design Manager was built with the intent to help non-compiled code developers package up all of the "no-code" assets in a site and make them easily redeployable. What Design Manager means for the old schoolers is that your page layouts will not get redeployed unless you create your page layouts via Design Manager.

There’s nothing wrong with creating page layouts using SharePoint Designer. I'm all about making your deployments, and subsequently, your life, easier. That's why I evangelize the use of the “new school” Design Manager when possible.

Once you create a page layout using Design Manager (Site Actions>Design Manager>Edit Page Layout>Create a page layout), it creates two files: an HTML and an ASPX page of the page layout. In Design Manager, you only see the HTML page. You only need to edit the HTML page, as all edits will propagate to the ASPX page.

Click on the page layout you created.

Here's your page layout. Naked as the day it was created.

clip_image001

In SharePoint 2013 you can add web parts and controls to the page by clicking Snippets in the upper-right hand corner.

From the Snippets, you would think you'd be able to select rating controls and such. Turns out you can do everything (content fields, web parts, etc.,) except comments and ratings.

clip_image002

Where’d you go social controls? In fairness though, the social controls didn’t appear natively in SharePoint Designer 2010 or 2013, so this isn’t terribly surprising. What’s surprising is that SharePoint 2013 has been around for two years and no one has documented how to do this but I digress.

At this point it becomes apparent that Design Manager’s snippet creator won't be of any use to use to create a snippet. Since Design Manager won't give you the goods, I will. Open up SharePoint Designer and the HTML page layout you wish to use.

In your page layout, paste in these snippets where you'd like the comments and ratings to reside.

Comments

<div class="comments">  

<!--CS: Start Comments Snippet-->

<!--SPM:<%@ Register TagPrefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->

<!--SPM:<div class="article-content">-->

<!--SPM:Comment on this article:-->

<!--SPM:<SharePointPortalControls:SocialCommentControl 

        ID="CommentControl" runat="server"/>-->

<!--SPM:</div>-->

<!--CE: End Comments Snippet-->				

</div>

Ratings

<div class="ratings">

<!--CS: Start Rating Snippet-->

<!--SPM:<%@ Register TagPrefix="SharePointPortalControls" 

    Namespace="Microsoft.SharePoint.Portal.WebControls" 

    Assembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->

<!--SPM:   <SharePointPortalControls:AverageRatingFieldControl 

    ID="PageRatingControl" 

    FieldName="AverageRating" 

    runat="server"/>-->

<!--CE: End Rating Snippet-->

</div>

 

If you're old school, you'll notice that what's different here is that the C# declaration is right in the snippet and is not at the top of the page. Additionally, the declaration is used in each snippet. It's not required to be in every snippet, it at least has to be in one snippet, but it follows suit with how other fields generate their markup when using Design Manager.

When you return to Design Manager and preview the page, you’ll see the comment control is visible, but since ratings is done on a library by library basis, the control displays “Rating not supported.”

image

When you’re done adding controls to the page and working on the branding, be sure to publish the page layout. Now you can now create a design package to import the page layout into another site or environment.

Loading Next Article