Click here to Skip to main content
1,822 members
Articles / Security / .NET 3.5
Article

Thought of the Day Web Part

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
25 Nov 2011CPOL 5.9K  
Thought of the day web part for SharePoint 2010 server

Introduction

In this example, I am going to build a Thought of the day web part for a SharePoint 2010 site. In order to install SharePoint 2010 on your local machine, read Setting Up the Development Environment for SharePoint 2010 on Windows Vista, Windows 7, and Windows Server 2008. In order to develop this webpart, you need Sharepoint 2010 and Visual Studio 2010 and finally you will get the following kind of web part and it will get a random thought from a list.

1.jpg

Using the Code

Create a visual web part project and named it TOTD.

2.jpg

Add a site URL you want to deploy your web part.

3.jpg

Click Finish and Delete webpart created by default and add a new visual web part as follows:

4.jpg

On your design plan, place an Image Box, and two lables and place them in a table as you want.

ASP.NET
<style type="text/css"> 

.style1 
{ 
width: 409px; 
} 
.style2 
{ 
width: 100px; 
} 
.style3 

{ 
height: 16px; 
} 
</style> 

<table class="style1"> 
<tr> 
<td rowspan="2" class="style2"> 
<asp:Image ID="ImgAuthor" runat="server" Height="100px" Width="100px" /> 
</td> 
<td valign="top" class="style3"> 
<asp:Label ID="lblTOTD" runat="server" Font-Italic="True" Font-Names="Calibri" 
Font-Size="12pt" style="z-index: 1; left: 120px; top: 29px; width: 376px" 
ForeColor="#003399"></asp:Label> 
</td> 
</tr> 
<tr> 
<td align="right" valign="top"> 
<asp:Label ID="lblAuthor" runat="server" Font-Names="Calibri" 
Font-Size="9pt" style="z-index: 1; left: 239px; top: 97px; text-align:right; 
height: 13px; width: 252px"></asp:Label> 
</td> 
</tr> 
</table> 

Name them as ImageBox:ImgAuthor.

Lable:lblTOTD, lblAuthor and you will get the following kind of front end.

5.jpg

Ok.. now you are finish with your front end design parts. Let's go to the code behind side.

C#
protected void Page_Load(object sender, EventArgs e) 
{ 
SPWeb oWebsite = SPContext.Current.Web; 
SPList oList = oWebsite.Lists["QOTD"]; 
SPListItemCollection collItem = oList.GetItems("Thought", "AuthorImage", "AuthorName"); 

Random random = new Random(); 
int RndItem = random.Next(1, collItem.Count+1); 
int LastDay = 0; 
int TOTD = 0; 
int CurrentDay = DateTime.Now.DayOfYear; 

try 
{ 
LastDay = int.Parse(Application["LastDay"].ToString()); 
TOTD = int.Parse(Application["TOTD"].ToString()); 

if (LastDay != CurrentDay) 
{ 
Application["LastDay"] = CurrentDay; 
Application["TOTD"] = RndItem; 
SPListItem oItem = collItem[RndItem-1]; 
this.ImgAuthor.ImageUrl = SPEncode.HtmlEncode
	(oItem["AuthorImage"].ToString().TrimEnd('?', '.', ',', ' ')); 
this.lblTOTD.Text = oItem["Thought"].ToString(); 
this.lblAuthor.Text = SPEncode.HtmlEncode(oItem["AuthorName"].ToString()); 
} 

else 
{ 
SPListItem oItem = collItem[TOTD-1]; 
this.ImgAuthor.ImageUrl = SPEncode.HtmlEncode
	(oItem["AuthorImage"].ToString().TrimEnd('?', '.', ',', ' ')); 
this.lblTOTD.Text = oItem["Thought"].ToString(); 
this.lblAuthor.Text = SPEncode.HtmlEncode(oItem["AuthorName"].ToString()); 
} 

} 
catch 
{ 
Application["LastDay"] = CurrentDay; 
Application["TOTD"] = RndItem; 
SPListItem oItem = collItem[RndItem - 1]; 
this.ImgAuthor.ImageUrl = SPEncode.HtmlEncode
	(oItem["AuthorImage"].ToString().TrimEnd('?', '.', ',', ' ')); 
this.lblTOTD.Text = oItem["Thought"].ToString(); 
this.lblAuthor.Text = SPEncode.HtmlEncode(oItem["AuthorName"].ToString()); 
}
}

Now you have finished your web part development. Let's deploy your web part to Sharepoint 2010 server.

In order to deploy, you have to create an Image library and a Custom List on your site. Create a custom list and name it as QOTD. Create Columns:

1

  • Column Type -> Hyperlink or Picture
  • Column Name -> AuthorImage
  • format URL as -> Picture

2

  • Column Type -> Single line of text
  • Column Name -> AuthorName

3

  • Column Type -> multiple lines of text
  • Column Name -> Thought

Now set the title column as follows:

6.jpg

Go to List Tools->List->Modify View and check display only for above fields:

7.jpg

Now you have to create a picture library in order to store your author's images.

Create a Picture library and name it as “QOTDImage”.

Create a single line text column and name it as Author and rename the title column as “Name”. Finally, you will be having the following kind of Library:

8.jpg

Now you have to fill up QOTD list as much as possible and give the AuthorImage link to the relevant image that is in the image library.

9.jpg

In my case, “http://ca5-sd-c-022:8080/sites/behive/QOTDImage/Einstine.bmp”.

10.jpg

All the things are OK now.

Compile the project and deploy it, then you will have your web part in your web site.

Go to Site Action-> Edit Page ->Inset (Editing Tool ribbon)->Web Part-> Categories ->Custom and you will be seeing the web part with the name of “TOTD_Web_Part”. Add it and enjoy.

History

  • 19th June 2010: Initial update

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Sri Lanka Telecom
Sri Lanka Sri Lanka
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --