Custom User Control in SharePoint 2010

In this post, I would like to show you how easy to implement Custom User Control in SharePoint 2010. Actually, this is not only for SharePoint 2010, but it can only be useful for other SharePoint versions.

The goal is to create simple custom user control to display carousel images from image library and place the user control in master page top banner.

uc2
uc3

Below is the list of step by step guide:

  1. Upload images to your Image Library on root site and set the title to start with “light”.
    uc6
  2. Open Visual Studio 2010 > File > New > Project > Select Empty SharePoint Project. Enter the project name and location. Then click OK.
    uc4
  3. In SharePoint Customization Wizard, Enter your local site URL and Select Deploy as farm solution. Then click Finish.
  4. Right click the project in solution explorer, select Add > New Item > User Control > Enter the User Control Name. Then click Add.
    uc1
  5. Rename the Custom User Control folder under ControlTemplates to MyCustomUserControl.uc5
  6. Add Literal Control to the MyUserControl.ascx in Source code mode.
    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="MyCustomUserControl.ControlTemplates.MyCustomUserControl.MyUserControl" %>
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    
  7. Ensure jQuery and jqFancyTransitions plug-ins added to your master page, I’ve showed how to add it in previous article about Custom SharePoint 2010 Branding.
  8. Update Page_Load method to look like below. It will query the Image library with title contains “light” and use images results to display the carousel banner.
    using System;
    using System.Web.UI;
    using Microsoft.SharePoint;
    using System.Text;
    
    namespace MyCustomUserControl.ControlTemplates.MyCustomUserControl
    {
        public partial class MyUserControl : UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                StringBuilder sb = new StringBuilder();
    
                using (SPWeb web = SPContext.Current.Site.RootWeb)
                {
                    SPList lstImage = web.Lists["Images"];
                    if (lstImage != null)
                    {
                        SPQuery query = new SPQuery();
                        query.Query = "<Where><Contains><FieldRef Name='Title' /><Value Type='Text'>light</Value></Contains></Where>";
                        SPListItemCollection coll = lstImage.GetItems(query);
                        if (coll.Count > 0)
                        {
                            sb.AppendLine("<script>");
                            sb.AppendLine("$(document).ready( function(){ ");
                            sb.AppendLine("$('#slideshowBannerHolder').jqFancyTransitions({ width: 849, height: 112, strips: 1, delay: 5000, stripDelay: 50, titleOpacity: 0, navigation: false }); ");
                            sb.AppendLine("});");
                            sb.AppendLine("</script>");
                            sb.AppendLine("<div id='slideshowBannerHolder'>");
                            foreach (SPListItem eachImage in coll)
                            {
                                sb.AppendLine(String.Format("<img src='{0}' alt='{1}' />", web.Url + "/" + eachImage.File.Url, eachImage.Title));
                            }
                            sb.AppendLine("</div>");
                        }
                    }
                    else
                    {
                        sb.Append("<div id='slideshowBannerHolder'>Image list NOT found.</div>");
                    }
                    Literal1.Text = sb.ToString();
                }
            }
        }
    }
    
  9. Register and Place the user control to your custom master page.Register your custom user control on the top section of master page.
    <%@ Register TagPrefix="MyUserControl"  TagName="CUS" Src="~/_controltemplates/MyCustomUserControl/MyUserControl.ascx" %>
    

    In top navigation section, place your custom user control.

                <div id="TopBanner">
                    <MyUserControl:CUS id="MyUserControl1" runat="server" />
                </div>
    
  10. Build and Deploy your solution.

Results

Yeah … you have carousel banner in your SharePoint site.

uc2
uc3

Advertisements

Tagged: , , , ,

One thought on “Custom User Control in SharePoint 2010

  1. SutoCom 04/29/2013 at 1:20 PM Reply

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: