Guest Blog by HiSoftware's Founder Robert Yonaitis - Customizing the Page Editing Toolbar to Include Content Validation for the Web Content Scenario in MOSS

In recent weeks several people have asked me how they can implement content validation in Microsoft SharePoint as a new menu item for users in such a way to allow not only for validation but also to include guidance and educational value. An additional request has been the ability to test for Accessibility in languages beyond English; specifically: Spanish, Italian, and French. This solution will cover these concerns.  This blog covers content validation for:

• Accessibility
• Link Checking
• (X)HTML Markup Validity

To follow along you either need SharePoint installed, or you can simply download the Microsoft Office SharePoint Server 2007 VHD that will contain all the software needed for you to follow along. For the testing engines, the following sites will be referenced:

• The SIDAR Foundations Hera Software: http://www.sidar.org/hera/
• The W3C markup Validation Service: http://validator.w3.org/
• The W3C Link Checker Service: http://validator.w3.org/checklink

For the purpose of this test and code, this post will reference these external sites and the validation will run externally. However, in some cases this will not be possible and you may therefore want to download these validation servers to your local servers so as not to worry about hostname routing over the Internet. This example will be complete and it will require no outside references. If you find something is missing please notify the author: Robert B. Yonaitis @ ryonaitis@gmail.com.

Figure 1 - MOSS interface displaying our final product which is integrated content validation

Note the menu item Validation contains three new tests: Validate Accessibility with Hera, Validate Links with the W3C Link Checker, and Validate Markup with the W3C Validator.  To create this menu option we need to complete a few simple steps:

1. Edit the CustomEditingMenu.XML File with SharePoint Designer
2. Perform an IIS Reset on the Litwaredemo machine
3. Test our pages

In this method there will be no source code to write or compile.  So let us begin!

Editing the CustomEditingMenu.XML File

To properly ADD items to the Edit Menu capabilities, you will need to modify or add a CustomEditingMenu.XML file. By default the litwaredemo image has a Blank CustomEditingMenu.XML file. This is what we will edit to provide content validation.

1. Start the WIN03_MOSS.VHD
2. Open SharePoint Designer from the LITWAREDEMO VHD to the MOSS Site

a. Select Start
b. Select All Programs
c. Select Microsoft Office
d. Select Microsoft Office SharePoint Designer
e. Select File from The SharePoint Designer Menu
f. Select Open Site from The SharePoint Designer Menu
g. TYPEIN http://localhost/ into the Site Name Input Box
h. Select Open
i. Login if Required: Default User/ Password pair is: Administrator / pass@word1

3. Navigate the folder list to _catalogs / masterpage / Editing Menu
4. Open the CustomEditingMenu.XML file in the SharePoint Designer
5. Replace the content with the following content (NOTE: THIS ASSUMES THIS FILE HAS NOT BEEN MODIFIED BEFORE AND YOU ARE WORKING WITH A FRESH IMAGE)

<?xml version="1.0" encoding="utf-8" ?>
<Console>
  <references>
    <reference TagPrefix="cms"
    assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0,
    Culture=neutral, PublicKeyToken=71e9bce111e9429c"
    namespace=
    "Microsoft.SharePoint.Publishing.WebControls.EditingMenuActions" />
  </references>
  <structure>
    <ConsoleNode ConfigMenu="Add" Sequence="600"
      NavigateUrl="BLOCKED SCRIPT" AccessKey="L" DisplayText="Validation"
      UserRights="EmptyMask" UseResourceFile="false"
      RequiredStates="InSharedView" ID="LinksMenu" >
      <ConsoleNode
        DisplayText="Validate Accessibility with Hera"
        UseResourceFile="false"
        ImageUrl="/_layouts/images/ActionsSettings.gif"
        UserRights=" AddAndCustomizePages"
        RequiredRightsMode="Any"
        PermissionContext="CurrentSite"
        IsSiteRelative="False"

NavigateUrl="BLOCKED SCRIPTwindow.open('http://www.sidar.org/hera/index.php?url='+window.location+'?PagePreview=true');"
        ChangedNodeID="">
      </ConsoleNode>
      <ConsoleNode
        DisplayText="Validate Links with the W3C Link Checker"
        UseResourceFile="false"
        ImageUrl="/_layouts/images/ActionsSettings.gif"
        UserRights=" AddAndCustomizePages"
        RequiredRightsMode="Any"
        PermissionContext="CurrentSite"
        IsSiteRelative="False"

NavigateUrl="BLOCKED SCRIPTwindow.open('http://validator.w3.org/checklink?uri='+window.location+'?PagePreview=true+&amp;hide_type=all&amp;depth=&amp;check=Check');" 
        ChangedNodeID="">
      </ConsoleNode>
      <ConsoleNode
        DisplayText="Validate Markup with the W3C Validator"
        UseResourceFile="false"
        ImageUrl="/_layouts/images/ActionsSettings.gif"
        UserRights=" AddAndCustomizePages"
        RequiredRightsMode="Any"
        PermissionContext="CurrentSite"
        IsSiteRelative="False"

NavigateUrl="BLOCKED SCRIPTwindow.open('http://validator.w3.org/check?uri='+window.location+'?PagePreview=true');"
        ChangedNodeID="">
      </ConsoleNode>
    </ConsoleNode>
  </structure> 
</Console>

6. Select File | Save from the SharePoint Designer Menu
7. CHECK the file in if required
8. Publish a Major Version
9. Close SharePoint Designer
10. From the Start Menu Select Start | Run
11. Enter IISRESET in the OPEN: Text Input
12. Select OK
13. When the IISRESET is complete Launch your site http://litwaredemo/pages/default.aspx

You will note you now have the three menu items under the new validation menu item

Some Explanations of the Nodes

This post covered a large amount of ground, and now it is time to step back for a moment and explain the validation a bit.  For this, we will use the Hera Accessibility Validation node.

<ConsoleNode
        DisplayText="Validate Accessibility with Hera"
        UseResourceFile="false"
        ImageUrl="/_layouts/images/ActionsSettings.gif"
        UserRights=" AddAndCustomizePages"
        RequiredRightsMode="Any"
        PermissionContext="CurrentSite"
        IsSiteRelative="False"

NavigateUrl="BLOCKED SCRIPTwindow.open('http://www.sidar.org/hera/index.php?url='+window.location+'?PagePreview=true');"
        ChangedNodeID="">

In the Console node, we will set the values required to implement Accessibility Validation. Most of the items are self explanatory but the following is an Explanation:

• DisplayText - The DisplayText attribute is used to name the menu item text that the user will see as in Figure 1 of this post and is configurable by the person setting up the site
• UseResourceFile - By default this is set to false for all of the validations
• ImageURL - This assigns the menu item image to be the actionssettings.gif file and is configurable by the person setting up the site
• UserRights - The UserRights attribute describes the rights necessary to see the node that is being described. A complete list of available values can be found on the following MSDN Page and is customizable by the person configuring the menu: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spbasepermissions.aspx
• RequiredRightsMode - The RequiredRightsMode attribute is set to any by default
• PermissionContext - The PermissionContext attribute is set to the CurrentSite. A complete list of available values can be found on the following MSDN Page and is customizable by the person configuring the menu: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.utilities.permissioncontext.aspx
• IsSiteRelative - The IsSiteRelative attribute is set to false. This is very important. It tells the system that the NavigateURL link is not relative to the MOSS site you are on so it does not attend the page being called to the current site.
• o If this was not set to false you would end up with a link to something like this: http://litwaredemo/Pages/BLOCKED SCRIPTwindow.open('http://www.sidar.org/hera/index.php?url='+window.location+'?PagePreview=true');"
• NavigateURL - The NavigateURL attribute is where we define what page to test and what site we will be testing the site on - in this example it is Hera. Please note Hera will be able to detect your browser language and bring up the page in the correct language.

Figure 2 - Hera Report

Closing

The post you just read is designed to work on sites available on the Internet.  If you will be using this on an intranet, you will need to download and install the testing engines onto your own server. All of the validation engines selected for this example can be downloaded. Please note the NavigateURL will have to change if you change validation server locations from the ones that are used for the example.

Upcoming Posts

• How to deploy this solution over a farm as a feature
• How to create a simple workflow that takes advantage of these items
• How to create MOSS publishing sites that produce valid xhtml