SharePoint Application Page with Custom Controls

In this article, I will describe the use of Application Pages (_Layouts) and will show you, step by step, how to build your custom Application Page with your own Web Controls

In this article, I will describe the use of Application Pages (_Layouts) and will show you, step by step, how to build your custom Application Page with your own Web Controls.

Usually, as a SharePoint developer, when we need to add specific business logic with user interface to SharePoint application, we will create a Web Part. In many cases web parts are great and also the best solution, but not always. It is important to understand your business requirements and to find the best way to implement it in SharePoint application.

Pages Types in SharePoint
First, let’s understand the main different between Application Pages and Content Pages:

• Content Pages – Contains content controls that can be modified by end users.
  ONLY Content Pages can contain Web Part Zones, therefore can contain Web Parts.
  
• Application Pages – Are regular ASPX pages that exposed in every site collection or sub site under the _layouts folder.

When we understand these main differences it is easy to know when to use each page, For example:

Scenario A - Content Pages
You need to create an RSS to show relevant content to users in a certain group and you need to support customization by sites administrators and personalization for end users.

Scenario B - Application Pages
Your company wants to provide a central page that displays the latest articles from Eggheadcafe.com. This page will be available for company employees and could not be configured by end users or sites administrators.

Applies to: Microsoft Office SharePoint Server 2007, Visual Studio 2008 with WSPBuilder Extensions

This programming task describes how to create one Application Page that contains two custom Web Controls: a control that display a clickable image which leads to a Eggheadcafe.com website and another control that display the latest articles from Eggheadcafe.com.

Step 1 – Create your solution

1. Start Visual Studio.
2. On the File menu, click New, and then click Project. The New project dialog box appears.
3. Select WSPBuilder and then WSPBuilder Project.
4. Give your solution a name and click OK.

Step 2 – Create the WSPBuilder deployment project

1. Add a folder under the 12 folder called “TEMPLATE”.
2. Add a folder under the TEMPLATE folder called “Images”.
3. Add a folder under the Images folder called “eggheadcafe”.
4. Add this image to your Images folder.
5. Add a folder under the TEMPLATE folder called “LAYOUTS”.
6. Add a folder under the LAYOUTS folder called “ASPX”.
7. Right click on the ASPX folder, Add new item, Select Text File.
8. Rename the TextFile1.txt to “CustomPage.aspx”

Step 3 – Create the code behind folder and files

1. Add a folder called “Assembly” under the project menu.
2. Add a folder under the Assembly folder called “WebControls”.
3. Right click on the WebControls folder, Add new item, Select Class.
4. Rename Class1.cs to Control1.cs
5. Right click on the WebControls folder, Add new item, Select Class.
6. Rename Class1.cs to Control2.cs

Step 4: Add a Reference to System.Web.dll

1. On the Project menu, click Add Reference.
2. On the .NET tab, click System.Web.
3. Click OK.

Step 5: Create The Apllication Page

1. Open the CustomPage.aspx file.
2. Link the custom application page to application.master
   <%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" %>
   
3. Associates aliases with namespaces and class names.
   <%@ Register TagPrefix="CustomControls" Namespace="Your Namespace Name" Assembly="Your Assembly Name, Version=1.0.0.0, Culture=neutral, PublicKeyToken=You Public Key Token" %>
   
4. Add the Control Place Holder.
   
5. Add the Custom Controls to the Control Place Holder.
   <asp:Content ID="Main" runat="server" ContentPlaceHolderID="PlaceHolderMain">
   <table>
   <tr>
   <td>
   <CustomControls:Control1 ID="control1" runat="server" />
   </td>
   </tr>
   <tr>
   <td>
   <CustomControls:Control2 ID="control2" runat="server" />
   </td>
   </tr>
   </table>
   </asp:Content>
   
6. Add site title to the Browser.
   <asp:Content ID="PageTitle" runat="server" ContentPlaceHolderID="PlaceHolderPageTitle">
   Application Page With Custom Controls
   </asp:Content>
   
7. Add site title to the Page.
   <asp:Content ID="PageTitleInTitleArea" runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea">
   Application Page With Custom Controls
   </asp:Content>

Step 6: Create The Image Control

1. Open the Control1.cs file.
2. Add the following using statements:
   
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

protected override void CreateChildControls()
{
base.CreateChildControls();
Image imgButton = new Image();
imgButton.ImageUrl = "/_layouts/images/eggheadcafe/eggheadcafe.jpg";
imgButton.ToolTip = "eggheadcafe";
imgButton.Attributes.Add("OnClick", "location.href('http://www.eggheadcafe.com')");
imgButton.Attributes.Add("style", "cursor: hand;");
this.Controls.Add(imgButton);
}

Step 7: Create the RSS Reader Control

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

protected override void CreateChildControls()
{

System.Net.WebRequest myRequest = System.Net.WebRequest.Create ("http://www.eggheadcafe.com/rss_pheedo.xml");
System.Net.WebResponse myResponse = myRequest.GetResponse();

System.IO.Stream rssStream = myResponse.GetResponseStream();
System.Xml.XmlDocument rssDoc = new System.Xml.XmlDocument();
rssDoc.Load(rssStream);

System.Xml.XmlNodeList rssItems = rssDoc.SelectNodes("rss/channel/item");

tring title = "";
string link = "";
string description = "";
StringBuilder sb = new StringBuilder();
for (int i = 0; i < rssItems.Count; i++)
{
System.Xml.XmlNode rssDetail;

rssDetail = rssItems.Item(i).SelectSingleNode("title");
if (rssDetail != null)
{
title = rssDetail.InnerText;
}
else
{
title = "";
}

rssDetail = rssItems.Item(i).SelectSingleNode("link");
if (rssDetail != null)
{
link = rssDetail.InnerText;
}
else
{
link = "";
}

rssDetail = rssItems.Item(i).SelectSingleNode("description");
if (rssDetail != null)
{
description = rssDetail.InnerText;
}
else
{
description = "";
}

sb.Append("<p style='font-family:ariel;font-size 8pt'><b><a href='" + link + "' target='new'>" + title + "</a></b><br/>");
sb.Append(description + "</p>");
if (i == 9)
{
break;
}
}

Label rss = new Label();
rss.Text = sb.ToString();
this.Controls.Add(rss);
}

Step 8: Deploy the WSP

1. Build Your solution.
2. Right-click on the project.
3. Click WSPBuilder Build WSP.
4. Right-click on the project.
5. Click WSPBuilder – Deploy WSP.
6. Get the assembly information from the GAC at C:\Windows\assembly
7. Right-click on the DemoProjectUI assembly and click properties.
8. Add the assembly information to the Application Page.
9. Open CustomPage.aspx file.
10. Copy the namespace name, assembly name and the public key token to the application page:

<%@ Register TagPrefix="CustomControls" Namespace="Your Namespace Name"
Assembly="Your Assembly Name, Version=1.0.0.0, Culture=neutral, PublicKeyToken=You Public Key Token" %>

Step 9: See it in action

1. Navigate to http://YOURSERVER/_layouts/aspx/CustomPage.aspx


Summary
The article shows another way to add custom functionality with user interface to SharePoint pages.

Download the Solution.

Share this article