Category Archives: Functional

Behold the new SharePoint Splash screen

With the new version of SharePoint 2013 that was released on MSDN last week as you can read here SharePoint 2013 has a new Installation screen to give power to the new Interface of SharePoint 2013.

SharePoint 2013 Splash

Today I will start a new fresh installation of a development machine with the following specifications:

  • Microsoft Office 2013 Professional.
  • Microsoft Office Visio 2013.
  • Microsoft Office Project 2013.
  • Visual Studio 2012.
  • Windows Server 2012.
  • SQL Server 2012.

Every interesting thing I will discover will be posted on this blog, so stay tuned!

Slow file transfer from Windows Explorer view to another Windows Explorer view of SharePoint.

Today I was replacing certain SharePoint documents for one of the projects we are working on. I noticed that the transfer of the document from Windows Explorer View to Windows Explorer view was very slow!! I mean 16,1 kb per Second slow!!!.

Investigating this problem I found that IE is configured to “Automatically detect settings”:

LAN_Settings

This was causing the WebDAV connection to work very slow. Disabling this obtain automatically made my transfer much faster. You can find this option by doing the following:

  1. In IE open the tools menu and click on Internet options.
  2. Click on the connections tab.
  3. Click on the Lan settings button.
  4. Uncheck the Checkbox and press ‘Ok’ to save the settings.

SharePoint Content Query web part like a SharePoint List View

I have been working on a solution to aggregate documents from sub sites to the top level site of SharePoint with the out of the box features. To accomplish this you will have to work with the Content Query web part of SharePoint.

The Content Query web part works great but it doesn’t look like a list view and that was the styling I wanted. So let’s get working and create the styling we want.

To get the content query web part to look like a list view you have to get trough the following steps:

Step 1

Enable the “SharePoint Server Publication Infrastructure” feature if you haven’t already got the feature enabled. This feature makes sure you have the “Content Query” web part available within the web part gallery.

SharePoint-Server-Publishing-Infrastructure

Step 2

Go to the page were you would like to display the “Content Query” web part and place it on the page. The web part can be found under the “Content Rollup” category.

Edit the web part and specify the query you would like to preform. If you have specified the query save the web part and export it.

Note: if you want to query a certain type of content and this content is available within the subsites but not on the root you can not use the UI to create the query. If you want to use the UI you have to make the type available within the root site.

Webpart-Export

Step 3

You can add your custom columns to the query. This can be accomplish by editing the “CommonViewFields” property of the web part:

<property name="CommonViewFields" type="string">LinkFilename,Text;Title,Text;</property>

The value of the property must be in the following format [InternalName],[Type];[InternalName],[Type];

Step 4

If you would like to read out those properties by a more meaningful name you can change the “DataColumnRenames” property. This property will take care of the renaming for us.

<property name="DataColumnRenames" type="string">Title,Title;LinkFilename,Name</property>

The value of the property must be in the following format [InternalName],[New Name];[InternalName],[New Name];

Step 5

Now that we have defined our columns we will need to edit the xslt template to render the columns. We will have to open SharePoint Designer and open the Style Library of the site.

SharePoint-Designer

First we will edit the “ContentQueryMain.xsl” file. Within the file find the following line (79):

<xsl:template name=”OuterTemplate.Body”>

Within this template a call will be made the ItemTemplate. Within the call we will have to pass a new parameter called “LastRow” so that we know when we will have to close our grid.

For this search for the following lines (128):

<xsl:call-template name="OuterTemplate.CallItemTemplate">
    <xsl:with-param name="CurPosition" select="$CurPosition" />
</xsl:call-template>

And change it to:

<xsl:call-template name="OuterTemplate.CallItemTemplate">
    <xsl:with-param name="CurPosition" select="$CurPosition" />
    <xsl:with-param name="LastRow" select="$LastRow" />
</xsl:call-template>

Now that we pass the parameter we also have to change the template to accept the parameter.

Go to line 147 and you see the “CallItemTemplate”. Copy the second line and past it directly beneath it and make it look like this:

<xsl:template name="OuterTemplate.CallItemTemplate">
<xsl:param name="CurPosition" />
<xsl:param name="LastRow" />

Because we want to use this within our custom item template we also have give the parameter through to the template by adding a when statement just before the <xsl:otherwise> within the CallItemTemplate:

<xsl:when test="@Style='SPGrid'">
 <xsl:apply-templates select="." mode="itemstyle">
  <xsl:with-param name="CurPos" select="$CurPosition" />
  <xsl:with-param name="Last" select="$LastRow" />
 </xsl:apply-templates>
</xsl:when>

In this statement we specify that it only has to pass-through the parameter when the item template is SPGrid. So our custom template is going to be called “SPGrid”.

Step 5

Now it is  time to edit the “ItemStyle.xsl” file. Within this file we add our custom xslt item template:

<xsl:template name="SPGrid" match="Row[@Style='SPGrid']" mode="itemstyle">
    <xsl:param name="CurPos" />
    <xsl:param name="Last" />

    <xsl:variable name="SafeImageUrl">
      <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
        <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
      </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="SafeLinkUrl">
      <xsl:call-template name="OuterTemplate.GetSafeLink">
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
      </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="DisplayTitle">
      <xsl:call-template name="OuterTemplate.GetTitle">
        <xsl:with-param name="Title" select="@Title"/>
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
      </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="LinkTarget">
      <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
    </xsl:variable>

    <xsl:variable name="tableStart">
      <xsl:if test="$CurPos = 1">
       <![CDATA[ 
        <table width="100%" class="ms-listviewtable" cellpadding="1" cellspacing="0" border="0">
          <tr class="ms-viewheadertr ms-vhltr">
            <th class="ms-vh-icon"></th>
            <th class="ms-vh2">Name</th>
          </tr>]]>   
      </xsl:if>
    </xsl:variable>

    <xsl:variable name="tableEnd">
      <xsl:if test="$CurPos = $Last">
        <![CDATA[ </table> ]]>
      </xsl:if>
    </xsl:variable>

    <xsl:value-of select="$tableStart" disable-output-escaping="yes"/>
    <tr class="ms-alternating ms-itmhover">
      <td class="ms-vb-icon">
          <xsl:if test="string-length(@DocumentIconImageUrl) != 0">
            <div class="image-area-left">
              <img class="image" src="{@DocumentIconImageUrl}" title="" />
            </div>
        </xsl:if>
      </td>
      <td class="ms-vb2">
        <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">                  <xsl:value-of select="$DisplayTitle"/>
        </a>
      </td>
      <td>
        <xsl:value-of select="@Title"/>
      </td>
    </tr>
    <xsl:value-of select="$tableEnd" disable-output-escaping="yes"/>
  </xsl:template>

The displayed xslt has to be placed just above the closing </xsl:stylesheet> tag. This xsl creates a template for each item and will display the icon , the title link and the title of the document.

Result

Inline Editing in SharePoint 2010 (UI and Code)

Within SharePoint 2010 it is possible to enable inline editing on list items. This can be done by changing properties on a view of a SharePoint library what can be done in code and trough the user interface. To allow inline editing trough the user interface you have to do the following: Navigate to the list for which you want to allow inline editing:

ListSettings

Click on list and then list settings. On the list settings screen click on the list view you would like to edit on the bottom of the screen:

ListSettingsScreen

In the view screen you have a section called: Inline editing. Within that section you have a checkbox to allow inline editing:

ViewSettings

When you have enabled this checkbox you can inline edit the items in your list:

InlineEditing

Inline editing can also be enabled trough code. You can do this by following the code example below:

using(SPSite site = new SPSite("URL of the site"))
{
    SPWeb web = site.RootWeb;
    SPList list = web.Lists["Name of the list"];

    SPView view  = list.Views["Title of the view"];
    view.InlineEdit = "TRUE";
    view.Update();
}

The ‘InlineEdit’ property on the view is in the public beta version of SharePoint 2010 a string value. Hopefully they will change this to a Boolean value in the final version.

Branding a SharePoint site – Part 2

Last week I wrote the first article in a series of articles about branding your SharePoint site. In the first article we discussed how to brand your site and make it available within SharePoint with a Timer Job. In the following article we will make our theme the default theme by using Feature stapling and we will discuss a way to replace all the out of the box search images without replacing the default one in the 12 hive. To make our theme the default theme we will have to create two features. One feature (feature stapling) will activate a feature that activates our theme when a site is created. First we will create a feature to activate our theme. The feature.xml will look like this:

 <?xml version="1.0" encoding="utf-8"?>
 <Feature  Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e"
           Title="motion10 Theme Activator : motion10"
           Description="Feature that will activate the motion10 theme for the web. It will also replace the out of the box search images if you have jQuery enabled."
           Version="12.0.0.0"
           Hidden="FALSE"
           Scope="Web"
           DefaultResourceFile="core"
           ReceiverAssembly="Motion10.SharePoint.Theme, Version=1.0.0.0, Culture=neutral, PublicKeyToken=09e87b786333535e"
           ReceiverClass="Motion10.SharePoint.Theme.ThemeActivator"
           Creator="Maik van der Gaag"
           ImageUrl="motion10/FeaturesIcon.png"
           ImageUrlAltText="http://www.motion10.com"
           xmlns="http://schemas.microsoft.com/sharepoint/">
   <Properties>
     <Property Key="Theme:TemplateID" Value="motion10"/>
   </Properties>
 </Feature>

The feature has a feature receiver that activates the theme that is defined in the feature property called “Theme:TemplateID”. The receiver will activate the theme on the web wherefore the feature is activated. On the deactivation of the feature it will deactivate our theme and activate the default theme.

public static readonly string keyTheme = "Theme:TemplateID";
 public override void FeatureActivated(SPFeatureReceiverProperties properties) {
    try {
         SPWeb web = (SPWeb)properties.Feature.Parent;
         string theme = properties.Definition.Properties[keyTheme].Value;

         if (web.Theme != theme) {
             web.ApplyTheme(theme);
             web.Update();
         }
    } catch {
          throw;
    }
 }

 public override void FeatureDeactivating(SPFeatureReceiverProperties properties) {
     try {
          SPWeb web = (SPWeb)properties.Feature.Parent;
          string theme = properties.Definition.Properties[keyTheme].Value;

          if (web.Theme == theme) {
              web.ApplyTheme("none");
              web.Update();
          }
     } catch {
        throw;
     }
 }

As you can see in the code the theme is activated with the ApplyTheme() method on the Web object that we retrieve from the feature properties. When we deactivate the feature we check if the current theme is our theme because we do not want to change the theme if the current theme is not the one we created. When we have created the feature it is time to create a feature with feature stapling. Feature stapling is a way to activate a feature when a site is created with a certain site template. First we create a feature.xml file with a scope of web application.

 <?xml version="1.0" encoding="utf-8"?>
 <Feature  Id="b84r13fd-b1ab-4d90-a2c1-9701g732cb5e"
           Title="motion10 Theme Activator by defailt : motion10"
           Description="Feature that will activate the motion10 theme by default when a site is created."
           Version="12.0.0.0"
           Hidden="FALSE"
           Scope="WebApplication"
           Creator="Maik van der Gaag"
           ImageUrl="motion10/FeaturesIcon.png"
           ImageUrlAltText="http://www.motion10.com"
           xmlns="http://schemas.microsoft.com/sharepoint/">
   <ElementManifests>
     <ElementManifest Location="elements.xml" />
    </ElementManifests>
 </Feature>

In the feature you can see that we defined an elements manifest. In the elements manifest we will define the feature stapling like this:

 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <FeatureSiteTemplateAssociation Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e" TemplateName="STS#0" />
    <FeatureSiteTemplateAssociation Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e" TemplateName="STS#1" />
    <FeatureSiteTemplateAssociation Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e" TemplateName="STS#2" />
 </Elements>

The Id represents the feature Id of the feature that activates our theme. If you would like to make your theme the default theme for every site that is created within your web application you will have to insert a FeatureSiteTemplateAssociation with the template name “GLOBAL”:

 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <FeatureSiteTemplateAssociation Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e" TemplateName="GLOBAL" />
 </Elements>

Note: If you use GLOBAL make sure you explicitly make a FeatureSiteTemplateAssociation for STS#1 because the blank site has an attribute “AllowGlobalFeatureAssociations” which is set to false.

Now we have discussed a way to make the theme the default theme we want the search images to be replaced with our own images without replacing the search image in the 12 hive. To accomplish this we will create a jQuery method that replaces the standard gosearch.gif with our own search image. For adding the jQuery method to all of the pages we will use the delegate control AdditionalPageHead to load our jQuery that we add trough a user control. All these components have to be packed into a feature, because we want a minimal count of features we extend our theme activation feature with an elements manifest.

 <?xml version="1.0" encoding="utf-8"?>
 <Feature  Id="b84c13fd-b1ab-4d90-a2c1-9701c732cb5e"
           Title="motion10 Theme Activator : motion10"
           Description="Feature that will activate the motion10 theme for the web. It will also replace the out of the box search images if you have jQuery enabled."
           Version="12.0.0.0"
           Hidden="FALSE"
           Scope="Web"
           DefaultResourceFile="core"
           ReceiverAssembly="Motion10.SharePoint.Theme, Version=1.0.0.0, Culture=neutral, PublicKeyToken=09e87b786333535e"
           ReceiverClass="Motion10.SharePoint.Theme.ThemeActivator"
           Creator="Maik van der Gaag"
           ImageUrl="motion10/FeaturesIcon.png"
           ImageUrlAltText="http://www.motion10.com"
           xmlns="http://schemas.microsoft.com/sharepoint/">
   <ElementManifests>
     <ElementManifest Location="elements.xml"/>
   </ElementManifests>
   <Properties>
     <Property Key="Theme:TemplateID" Value="motion10"/>
   </Properties>
  </Feature>

In the elements file we insert our delegate control.

<?xml version="1.0" encoding="utf-8" ?>
 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
   <Control Id="AdditionalPageHead"
            ControlClass="Motion10.SharePoint.Theme.SearchImageReplacer"
            ControlAssembly="Motion10.SharePoint.Theme, Version=1.0.0.0, Culture=neutral, PublicKeyToken=09e87b786333535e">
   </Control>
 </Elements>

In the control we place the library off jQuery on the page and also insert our own method. It will search for tags with the attribute src that end with gosearch.gif (default image) and replace the src attribute with our own ImageUrl. Besides that we remove the onmouseover and onmouseout attribute.

public class SearchImageReplacer : UserControl {

         public static readonly string ImageUrl = "/_layouts/images/motion10/Search/gosearch.gif";
         public static readonly string DefaultSearchImageUrl = "/_layouts/images/gosearch.gif";

         protected override void OnPreRender(EventArgs e) {
             base.OnPreRender(e);

             StringBuilder javascript = new StringBuilder();

             javascript.Append("if(typeof jQuery != \"undefined\") {");
             javascript.Append("$(function(){");
             javascript.Append("$(\"[src$='gosearch.gif']\").attr(\"src\", \" " + ImageUrl + " \").removeAttr(\"onmouseover\").removeAttr(\"onmouseout\")");
             javascript.Append("});");
             javascript.Append("}");

             this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ReplaceSearchImage", javascript.ToString(), true);
         }
     }

Note: If you want to use jQuery in a production environment you have to think about a method for adding the jQuery Library : “ ”. Because when someone creates a webpart that uses jQuery they will insert the declaration into the page. When another user also uses jQuery they will do the same and then you will have two declaration of the jQuery library on the page.

To solve this you can create a feature with a delegate control that inserts the jQuery library into the page. And let the feature you are creating that uses jQuery have an activation dependency to the jQuery feature. If there is enough interest in an article that will explain the above in detail I will write a Branding your SharePoint site – Part 3 so let me know.