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.
Using the Code
Create a visual web part project and named it TOTD.
Add a site URL you want to deploy your web part.
Click Finish and Delete webpart created by default and add a new visual web part as follows:
On your design plan, place an Image Box, and two lables and place them in a table as you want.
<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.
Ok.. now you are finish with your front end design parts. Let's go to the code behind side.
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:
Go to List Tools->List->Modify View and check display only for above fields:
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:
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.
In my case, “http://ca5-sd-c-022:8080/sites/behive/QOTDImage/Einstine.bmp”.
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
