Customize Styles and Markup Styles Menus in the SP Ribbon

Styles and Markup Styles menus of SharePoint 2010 ribbon are populated dynamically by the client side code using Microsoft Ajax when we activate the Edit Mode of a page. Also they are populated based on the CSS styles that are available for the page.

How to Manage Styles Menu Items
Write CSS classes whose names have the prefix ms-rteStyle-XXXXX. Here XXXXX distinguishes different styles. “-ms-name” specifies the display name of the class within the Styles menu. Selecting this item will apply the styles corresponding to this CSS class to the Rich Text Editor content.

.ms-rteStyle-MyNormal
{
  -ms-name: "My Normal";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}
.ms-rteStyle-MyHighlight
{
  -ms-name: "My Highlight";
  color: #312a26;
  background-color: #fae032;
} 
.ms-rteStyle-MyComment
{
  -ms-name: "My Comment";
  font-style: italic;
}

How to Manage Markup Styles Menu Items
Write CSS classes whose names have the prefix ms-rteElement-XXXXX. Here XXXXX distinguishes different markup styles. “-ms-name” specifies the display name of the class within the Markup Styles menu. Selecting this item will apply the styles corresponding to this CSS class to the Rich Text Editor content. In here by specifying a HTML tag in the front of the class name (Ex: H1.ms-rteElement-OMyHeadline1) will nest the content with that HTML tag.

div.ms-rteElement-MyNormal
{
  -ms-name: "My Normal";
  font-size: 12px;
  color: #5a5a5a !important;
  font-weight: normal;
}
H1.ms-rteElement-OMyHeadline1
{
  -ms-name: "My Headline 1";
  font-size: 22px;
  color: #774d77;
  font-weight: normal;
  letter-spacing: 1.5px !important;
}
H2.ms-rteElement-MyHeadline2
{
  -ms-name: "My Headline 2";
  font-size: 18px;
  color: #774d77;
  font-weight: normal;
  letter-spacing: 1.5px !important;
}
div.ms-rteElement-MyBold
{
  -ms-name: "My Bold";
  font-size: 12px;
  color: #5a5a5a !important;
  font-weight: bold !important;
}
div.ms-rteElement-MyCallout1
{
  -ms-name: "My Callout 1";
  color: #660000;
  background-color: #fef4e4;
  float: left;
  border: 1px solid #FD9F08;
}
P.ms-rteElement-MyParagraph
{
  -ms-name:"My Paragraph";
  color: #576170;
}

“My Headline 2” style will be applied in this way. Text content including the DIV element is nested within a H2 tag.


Difference between Styles and Markup Styles
Styles:

• Nest the text in a tag with the style class if the text is not already inside an HTML tag
• Just add the class to the current HTML tag if this tag is not a tag
• Replace the class of the HTML tag if this tag is a tag
• Remove the html tag if the same style is applied a second time (this is a way of removing a Style)

Markup Styles:

• Nest the text and its HTML tag within the html tag specified in the style if the tag to nest is a element
• Replace the current tag if it is not a element
• Remove all the styles for the children elements
• Remove the html tag if the same style is applied a second time (this is a way of removing a Markup style)

SharePoint List Type ID Numbers

Complete list of SharePoint 2010 list type's ID numbers for reference.

100 : Generic list
101 : Document library
102 : Survey
103 : Links list
104 : Announcements list
105 : Contacts list
106 : Events list
107 : Tasks list
108 : Discussion board
109 : Picture library
110 : Data sources
111 : Site template gallery
112 : User Information list
113 : Web Part gallery
114 : List template gallery
115 : XML Form library
116 : Master pages gallery
117 : No-Code Workflows
118 : Custom Workflow Process
119 : Wiki Page library
120 : Custom grid for a list
121 : Solution Catalog
122 : No Code Public Workflow
123 : Theme Catalog
130 : Data Connection library
140 : Workflow History
150 : Gantt Tasks list
200 : Meeting Series list
201 : Meeting Agenda list
202 : Meeting Attendees list
204 : Meeting Decisions list
207 : Meeting Objectives list
210 : Meeting text box
211 : Meeting Things To Bring list
212 : Meeting Workspace Pages list
301 : Blog Posts list
302 : Blog Comments list
303 : Blog Categories list
402 : Facility
403 : Whereabouts
404 : Call Track
405 : Circulation
420 : Timecard
421 : Holidays
499 : Input Method Editor Dictionary
600 : External List
1100 : Issue tracking
1200 : Administrator tasks list
1220 : Health Rules
1221 : Health Reports
2002 : Personal Document Library
2003 : Private Document Library

MSDN reference of SPListTemplateType Enumeration, which specifies the type of a list definition or a list template:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.splisttemplatetype.aspx

Intelligent String Breaking - DVWP

There are situations like we want to show only a part of a text followed by three dots or a more link, which is straight forward using substring(). But if the requirement is to not to cut the last word in half, there is some additional work involved. Here is an XSLT template to substring without breaking words.

In here StringBreak template looping over the characters in a given string and look for the last space character within the given length. Here the looping starts from the needed size of the result string, which is CharLimit index of the given text and goes towards start until, find a space character (Actually the first space character from the searching location). Once found, it gets the index of that space character and substring from start to that character.

<!-- String Break Template -->
<xsl:template name="StringBreak">
  <xsl:param name="text" />
  <xsl:param name="count" />
   
  <xsl:if test="string-length($text) &lt;= $count" >
     <xsl:value-of select="$text"/>
  </xsl:if>
  <xsl:if test="string-length($text) &gt; $count" >
    <xsl:if test="not($count &lt; 1)">                 
      <xsl:choose>
        <xsl:when test="substring($text, $count + 1, 1) = ' '">
          <xsl:value-of select="substring($text, 1, $count)"/> ...
        </xsl:when>
        <xsl:otherwise>
          <xsl:call-template name="StringBreak">
        <xsl:with-param name="count" select="$count - 1" />
        <xsl:with-param name="text" select="$text" />
      </xsl:call-template>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:if>
  </xsl:if>        
</xsl:template>

<!--Define a variable called ‘CharLimit’, which is the size of the output -->
<xsl:variable name="CharLimit" select="'30'"></xsl:variable>

<!-- Call String Break Template -->
<xsl:call-template name="StringBreak">
   <xsl:with-param name="text" select="@Title" />
   <xsl:with-param name="count" select="$CharLimit" />
</xsl:call-template>

Configuration Failed - SharePoint 2010 on Windows 7

When I was installing SharePoint 2010 on my Windows 7 machine, I ran into few issues, even though I installed all of its prerequisites that it says to install. Here are those issues and the solutions worked out for me.

Issue 1: An exception of type System.IO.FileNotFoundException was thrown. Additional exception information: Could not load file or assembly ‘Microsoft.IdentityModel, Version 3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′ or one of its dependencies. The system cannot find the file specified.


Solution:
Here the problem is that the Windows Identity Foundation is not installed on the machine. Windows Identity Foundation can be downloaded from here.

“The Windows Identity Foundation helps simplify user access for developers by externalizing user access from applications via claims and reducing development effort with pre-built security logic and integrated .NET tools.”


Issue 2:
An exception of type Microsoft.SharePoint.Upgrade.SPUpgradeException was thrown. Additional exception information: Failed to call GetTypes on assembly Microsoft.Office.Server.Search, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c. Could not load file or assembly ‘System.Web.DataVisualition, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35’ or one of its dependencies. The system cannot find the file specified.


Solution:
Here the problem is that the Chart Controls cannot be found on the machine. Chart Controls can be downloaded from here.

More on Data View Web Parts

Add a DVWP to a sub-site, which is depend on a SP List in root site.
Add “WebUrl” DataFormParameter to the “DataSourcesString” Property as follows. Here by specifying DefaultValue="/" to the WebUrl parameter, web part will always refer to the SP List instance in rootsite.

<property name="DataSourcesString" type="string">
&lt;%@ Register TagPrefix="cc1" Namespace="Microsoft.SharePoint.WebControls"
 Assembly".....
&lt;%@ Register TagPrefix="cc2" Namespace="Microsoft.SharePoint.WebPartPages"
 Assembly=".....
&lt;cc1:SPDataSource runat="server" UseInternalName="True" SelectCommand="....
&lt;SelectParameters&gt;
  &lt;cc2:DataFormParameter ParameterKey="ListName"
                  PropertyName="ParameterValues" DefaultValue="In The News"
                  Name="ListName"&gt;&lt;/cc2:DataFormParameter&gt;
  &lt;cc2:DataFormParameter ParameterKey="WebUrl"
                            PropertyName="ParameterValues" DefaultValue="/"
                            Name="WebUrl"&gt;&lt;/cc2:DataFormParameter&gt;
  &lt;asp:Parameter DefaultValue="5" Name="MaximumRows"&gt;
  &lt;/asp:Parameter&gt;
&lt;/SelectParameters&gt;
&lt;/cc1:SPDataSource&gt;
</property> 

Even though a Web Part is designed to use only in the rootsite, adding “WebUrl” DataFormParameter is necessary, since SharePoint shares Web Part gallery across entire site collection. So adding “WebUrl” DataFormParameter will prevent generating an error when users try to add SP List dependent DVWP to a sub site.


Display Limited number of Characters from a Rich Text Content/Field
If the data field is a html field, it is not possible to directly apply substring() function as the field value contains html tags as well. So if we directly applied the substring(), actual number of characters it return is less than the specified amount due to HTMl tags.
Therefore we need to apply a HTML stripping method first to get the pure text that we need to substring.

1. Define a parameter specifying the number of characters to be displayed.

<ParameterBinding Name="CharactersLimit" Location="None" DefaultValue="300"/>

2. Define a XSL template to remove HTML tags.

<xsl:template name="removeHtmlTags">
<xsl:param name="html"/>
<xsl:choose>
  <xsl:when test="contains($html, '&lt;')">
    <xsl:value-of select="substring-before($html, '&lt;')"/>
    <!--Recursively call removeHtmlTags template -->
    <xsl:call-template name="removeHtmlTags">
    <xsl:with-param name="html" select="substring-after($html, '&gt;')"/>
    </xsl:call-template>
  </xsl:when>
  <xsl:otherwise>
    <xsl:value-of select="$html"/>
  </xsl:otherwise>
</xsl:choose>
</xsl:template>

3. Get the pure text content by calling “removeHtmlTags” template.

<xsl:variable name="pureText">
<xsl:call-template name="removeHtmlTags">
  <xsl:with-param name="html" select="@myRichTextContent" />
</xsl:call-template>
</xsl:variable>

4. Extracts the specified number of characters and display.

<xsl:choose>
<xsl:when test="string-length($pureText) &amp; gt;number($CharactersLimit)">
  <p class="paraStyle_01">
    <xsl:value-of select="substring($pureText,1,number($CharactersLimit))"/>
    <xsl:text>.</xsl:text>
  </p>
</xsl:when>
<xsl:otherwise>
  <p class="paraStyle_01"><xsl:value-of select="$pureText"/></p>
</xsl:otherwise>
</xsl:choose>