How to add a Web User Control into SharePoint 2007

Tuesday, 17 March 2009 17:40 by myro

The best way to add your application pages into SharePoint 2007 is adding a web user control into a customized (ghosted) page using SharePoint Desginer. To compleate this page you will need:

  •     Microsoft Visual Studio 2005 or 2008
  •     Visual Studio 2005 Web Deployment Projects plug-in for Visual Studio (to build all your Web User Controls as a single DLL)
  •     Microsoft Office SharePoint Designer 2007 (to create your pages that will contains User Controls)

OK, let's start.

  •  Using Visual Studio open a new Web Site (myrocode.WSSUI) and add an Web User Control named WebUserControl.ascx.
  •  In the Build menu, choose Add Web Deployment Project.
  •  Name it myrocode.WSSUI_deploy
  •  In the WebSite Project add a reference to SharePoint.dll
  •   In WebUserControl.ascx add a button pasting this:

[code:xml]

<%@ Control="" Language="C#"
AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs"
Inherits="WebUserControl" %>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

In WebUserControl.ascx.cs add this:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.SharePoint;

public partial class WebUserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {}

    protected void Button1_Click(object sender, EventArgs e)
    {
        Button1.Text =SPContext.Current.Web.CurrentUser.Name + " has clicked me";
    }
}

And build the Solution.
Locate where Visual Studio has created your dll for your Web Deployment Project (mine is called myrocode.WSSUI_deploy.dll) .
Now comes the tricky part.... prepare your SharePoint for the battle Yell
We are going to deploy the DLL in our site's bin, create a SharePoint customized page using SharePoint Designer and add register the User Control in that page:

  • move to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES
  • Create a folder that will contain your controls
  • Name it as myrocodeCustomControls and copy your WebUserControl.ascx from your Web Deployment Project

You have just created a new virtual directory under CONTROLTEMPLATES and this folder can be accessed from any pages into your SharePoint Web site using _controltemplates/myrocodeCustomControls/ url.

  • Now locate where your Web Application resides on your file system ( C:\Inetpub\wwwroot\wss\VirtualDirectories\90\ ) and edit your Web.Config changing
[code:xml]

<trust level="WSS_Minimal" originUrl="" />

into

<trust level="WSS_Medium" originUrl="" />
  • Copy your myrocode.WSSUI_deploy.dll into your Web Application /bin folder

If you did everything right, now your Web Application can runs correctly your Web User Controls. You simply need to copy your presentation files (*.ascx) into \12\TEMPLATE\CONTROLTEMPLATES\myrocodeCustomControls and deploy the DLLs in the bin folder.

What are we missing now? We need to create the page that will contain the user control:

  • Open you Web Application using SharePoint Designer 2007 and create a new page (call it myrocode.aspx)
  • From the default.aspx you can copy almost everything to make it looks like a normal SharePoint page, but remember to register our new User Control!
    Here is the code:
<%@ Page="" language="C#" MasterPageFile="~masterurl/default.master"
    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
    Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"
    meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>

<%@ Register="" Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
    PublicKeyToken=71e9bce111e9429c" %>

<%@ Register="" Tagprefix="Utilities"
    Namespace="Microsoft.SharePoint.Utilities"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
    PublicKeyToken=71e9bce111e9429c" %>

<%@ Import="" Namespace="Microsoft.SharePoint" %>
<%@ Register="" Tagprefix="WebPartPages"
    Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
    PublicKeyToken=71e9bce111e9429c" %>

<!-- Register your User Control -->
<%@ Register="" src="~/_controltemplates/myrocodeCustomControls/WebUserControl.ascx"
    TagPrefix="myrocode" TagName="UC1" %>

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
  <SharePoint:EncodedLiteral runat="server" text="
    <"
%$Resources:wss,multipages_homelink_text%&gt;
      " EncodeMethod="HtmlEncode"/> -
      <SharePoint:ProjectProperty Property="Title" runat="server"/>

    <asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
  <IMG src="/_layouts/images/blank.gif" width="1" height="1" alt="">
asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
  <label class="ms-hidden">
    <SharePoint:ProjectProperty Property="Title" runat="server"/>
  <label>
<asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
  <style type="text/css">
    TD.ms-titleareaframe, .ms-pagetitleareaframe {
    height: 10px;
    }
    Div.ms-titleareaframe {
    height: 100%;
    }
    .ms-pagetitleareaframe table {
    background: none;
    height: 10px;
    }
  <style>
<asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <META Name="CollaborationServer" Content="SharePoint Team Web Site">
    <script type="text/javascript">
      var navBarHelpOverrideKey = "wssmain";
    <script>
  <asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">
  <SharePoint:DelegateControl runat="server"
    ControlId="SmallSearchInputBox"/>
<asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
<asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
  <style type="text/css">
    .ms-bodyareaframe {
    padding: 0px;
    }
  <style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<!-- Add here your User Control -->
  <myrocode:UC1 runat="server" id="uc11">myrocode:UC1>
</asp:Content>

Save the customized page, and reach it using your browser. If everything run well, you should be able too see a button that clicked displays your current identity. Personally I found out this is the best way to develop any custom page in SharePoint 2007 and I hope it helps you too.
Here is a screenshot of your result:

 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   ,
Categories:   SharePoint 2007
Actions:   Bookmark and Share | Permalink | Comments (6) | Comment RSSRSS comment feed
If you consider this post usefull for your purposes, please consider visiting my sponsors to help me out with the myrocode.com maintenance. Thank you.

Comments