I am examining the SharePoint 2010 architecture in order to find the best ways to customize the Wiki Pages of a Team Site. In this post we will focus on two kinds of elements:
- The SharePoint 2010 Ribbon and how are populated the Styles and Markup Styles Menu
- Some of the SharePoint 2010 templates, including the v4.master Master Page and the Team Site Wiki Page Template, wkpstd.aspx
Important: do not mistake a Wiki Page of a Team Site for a Wiki Page of an Enterprise Wiki. They are totally different since an Entreprise Wiki is a kind of publishing site, and a Wiki Page of an Enterprise Wiki can be based on different Wiki Page Templates.
In this post, I am examining the Wiki Pages for a Team Site so that this information can be used for SharePoint foundation 2010.
For more information about Enterprise Wiki:
Enterprise Wikis overview (SharePoint Server 2010)
ContentTypeId.EnterpriseWikiPage Property
SPC: Customizing Enterprise Wikis in SharePoint 2010 with Gail Jacoby & Ted Pattison
1 - Managing the Styles and Markup Styles Menu Items
One important thing to kow is that these items are populated dynamically, client side, using the JavaScript loaded by the SharePoint 2010 Ribbon, and I am now going to show how to see it in action.
1.1 - Debugging the SharePoint 2010 Ribbon
We are going to debug the JavaScript of the Ribbon while using IE8 in order to see how the menu are populated, so let us start by adding a new Style menu item.
Add an HTML form Web Part in a SharePoint 2010 wiki page in order to be allowed to insert some HTML within the page and add an style tag with a ms-rteStyle so that the menu can be able to load this style as a new item.
Then open the Tools menu of IE8 and locate the Developer Tools
Open the Developer Tools and hit the Script Tab
There is not much scripts loaded for the moment but activate the Edit mode for the page.
You will notice that activating the Edit Mode leads to the load of several files, but locate the following:
sp.ui.rte.debug.js
Open it
locate this line (12890) RTE.StyleRuleUtility.$u = function($p0, $p1, $p2)
and set the following breakpoint:
- sp.ui.rte.debug.js -->
Place a breakpoint in front of
the first line
if (!$p0.startsWith('.')) {
The goal now is to force SharePoint 2010 to load the styles, so Save & Close the page, empty the temporary internet files, add a custom style to one of the CSS files.
Now, hit the "Start Debugging" button in the Developer Tools
then, go back to the wiki page and activate the Edit Mode.
The tool starts debugging and stops on the breakpoint.
Continue to press F11, and you will be taken to a resource file that seems to validate some parameters, then when you come back to the script, you notice that a variable has been initialized to look for the ms-rte class elements.
Then the url for the first css file is retrieved
Then, this is AMAZING! the JavaScript of the Ribbon is loading the content of the CSS file by using an AJAX request with the XMLHttpRequest object.
You will notice the responseText variable with all the CSS classes loaded!
Then it is the turn of the wiki.css
and the corev4.css
finally I had a custom styles CSS, and you will see that I have placed the ms-rteStyle-Normal inside of it
Then the JavaScript starts loading the classes available within the page, first these two that are located in the <head> tag:
<style type="text/css">
.ctl00_PlaceHolderMain_Bottom_0{ border-color:Black;border-width:1px;border-style:Solid; }
.ctl00_wpz_0
{ border-color:Black;border-width:1px;border-style:Solid; }
Then the JavaScript finds the custom style I have placed within the HTML Form web Part
and stores the inner and outer html of it
and the class name
Conclusion: as the styles are loaded dynamically from all the places where you can store CSS classes, we don't have to worry about coding to manage the Styles and Markup Menus items, but just to focus on the good way of storing and referencing our CSS.
1.2 - Storing and registering the SharePoint 2010 CSS
- At the wiki page level.
With MOSS 2007, when creating a portal, we were sometimes hesitating between using the collaborative part of SharePoint (the lists, the pages, the Web Part pages), and the integrated CMS (Web Content Management). Both had benefits and drawbacks, and it seems that, in SharePoint 2010 the Wiki Pages of a Team Site are now closer to a WCM Page Layout than ever because the layout of the page has been dramatically improved.
However, the wiki pages of a Team Site don't seem to have been designed to be customized, and it is perfectly normal because there is a customizable version of the Wiki Pages in Sharepoint Server 2010: the Wiki Pages of the Enterprise Wiki.
Now this precision has been made, let us examine the limitations of the Wiki Pages for a Team Site:
First of all if you unghost a Wiki Page, the page UI will be spoiled by a premanent warning message.
Second, you cannot create other Wiki Page Templates and make them available for the end users when they want to create pages although it is possible with the Page Layouts and for the Wiki Pages of the SharePoint 2010 Enterprise Wiki.
Why?
When you create a Wiki Page within a team Site by using the SharePoint 2010 UI, the product use the method
SPFileCollection.Add( String,SPTemplateFileType)
It is the only method that can produce ghosted files within SharePoint 2010. The available tempates are:
- StandardPage
- WikiPage
- FormPage
and as you can see in the following screen shot of relector, the reference to the Wiki Page template is hardcoded, so there always will be only one template for the wiki pages of a Team Site, the one that is located at DocumentTemplates\wkpstd.aspx
Of course you can customize the Wiki Pages of a Team Site and let them in a ghosted state by deploying them with a feature, but you will have to upgrade and activate your feature each time you need another custom wiki page, and you will lose the benefit of letting end users create the pages by themselves
This is, at first, a bit puzzling, especially because, as the JavaScript of the SharePoint 2010 Ribbon is loading dynamically the CSS classes to populate the Styles and Markup menus within a Wiki Page, we were expecting to a native way of referencing the CSS at the level of the Wiki Page without that it could be modified by a contributor. Here again, we cannot do it although it is possible wiht a Page Layout and for the Wiki Pages of the Entreprise Wiki.
However, if you want to reference a custom CSS for one or several wiki pages of a Team Site at the level of the page without modifying the template, I have found a means to do it using a delegate control.
Unfortunately, it will not be enough to use this trick to manage the items of the Styles and Markup since you have first to REMOVE those that are delivered with the Out Of The Box version of SharePoint 2010 ie the native SharePoint 2010 ms-rteStyle and ms-rteElement classes (ms-rteStyle-Normal, ms-rteStyle-Highlight, ms-rteStyle-Byline,...., H1.ms-rteElement-H1, .ms-rteElement-H1, etc.) that are located within the corev4.css file.
(You could try anyway to use this trick to programmatically specify an alternate CSS for the site at the level of the Wiki Page, but I think it is not a good idea).
- At the Master Page level
Because we will need most of the time when branding a SharePoint 2010 site using wiki pages, to at least, remove the native ms-rteSyle and ms-rteElement classes located in the Themable/corev4.css folder and to replace them by our customn classes, we will use most of the time an alternate CSS, either by specifying it within the SharePoint Server 2010 UI, or programmatically for SharePoint 2010 foundation.
It is a very bad idea when wanting to replace the SharePoint 2010 corev4.css by a custom one to remove the CSSLink control within a Master Page and to render a custom LINK tag or to hardcode it because the CSSLink web control renders some other useful LINK for the search, and the new SharePoint 2010 dialogs, and also manages the new SharePoint 2010 themes.
So, in SharePoint 2010, when referencing any CSS it becomes quite mandatory to use the CSSLink and the CSSRegistration controls, because of the new themes.
0 Yorumlar