Its so very easy to be impressed by the fancy appearance that SharePoint has redefined since the last product and the effort are so very visible. The UI not only attracts the users but also curious TOM cats like me (besides running after Jerry m curious about SharePoint). One day I started building a simple sticky notes application for SharePoint for having information handy on site without having to open notepad every time for pasting URL's or other things. It was something I thought SharePoint was missing not realizing that there is a little cute button saying "Tags and Notes" on the right top corner. There is one catch though, the notes board works based on URL and stores the info in the user profile site. This means I cant have the notes data while navigating from one page to another. This made me curious enough to explore the underlying processing of this functionality.
After getting a little bored from the blah blah above you can now stop cursing me and expect some interesting and technical stuff. With the Swiss knife ... Some call it IE developer tool.. People I tell you!!! I inspected the tags and notes link and first step was the dialog box, rather a layouts page called SocialDataFrame.aspx . The basic controls here are the SocialTabControl, the SocialDataFrameManager and the SocialRecentItemControl web controls.
A great deal of information was scattered around (more like my flatmates room :P ) digging further. Lets try to explore what SharePoint has behind that pretty UI not just to learn but to understand how we can leverage the exiting code and to customize as per requirement take advantage of re-usability. Here we begin,
The SocialTabControl:
This web control class is found in Microsoft.SharePoint.Portal.WebControl namespace in the Microsoft.SharePoint.Portal assembly. A public class, this control is basically what renders as the name suggest the tab control in the UI for switching between tags and notes board. Cutting open this class leads to the scripts involved (We will dive into client side stuff very deep later on, so hang on). So this control renders a tab for two controls SocialTagsControl and SocialCommentControl (yes the notes board is nothing but a social comment control). So when the Create child control on the Tab control is called it register the control based on the item kind.. This comes from a enum SocialItemKind which has 2 items Tag, Note. So when you switch between tag and notes this function takes care of the control based on the item kind and then creates the HTML and scripts to handle the functionality. It also calls an internal service MetadataServiceHandler to check if the term store and meta data is available online or not. If you want to play around with the CSS used on this then its cui.css found in Layouts/1033/Styles folder.
The SocialDataFrameManager:
This web control is in the same namespace and assembly as above. A public class, this web control is basically where the comment and tag controls are created and rendered. The create child controls method check if the meta data service is available adds the tag control and the comments (notes) control is added without the meta data service check. This again uses another internal enum which is SocialItemType which gives None, NoteBoard, Rating or Tag check against which the comment control is created and rendered. Like wise for the tags control.
The SocialRecentItemControl:
In the same namespace this again a public class but sealed. There is a lot going on here and this is responsible for getting the tags and notes for the user based on the page URL user is on. So it mainly calls a UserProfileApplicationPorxy another sealed class to get the MySitePortalUrl of the current user and from there gets the tags and comments for the current page URL for the user. This is where you can use your custom control in combination with the manager and tab above to have a customized solution. The logic used for fetching the recent items is simple as it gets the top 3 items based on the page URI.
Another option here would be to use a control which asynchronously calls a service custom or OOB to get list items based on user from a list and not based on page, that ways you can have same data across different pages.
There is lot more than just these controls, there is a whole lot of java scripts involved in this and they if used properly can make life very easy, will discuss about more stuff related to this in coming posts and also will try to keep focus on how the client side power already put in by SharePoint can be used for our requirement without having to write custom code.
This is first post and I started from notes and tags coz that was something you see on every page, hope this information helps someone in some way, though its not something extraordinary but surely not much documented so thought of giving it a try. See you all soon...
- "T"
Knowledge shared is life saved!!