SharePoint Designer 2007 is available for free download

Starting April 1, 2009 SharePoint Designer 2007 is available as a free download. You can find a
lot more information at the SharePoint Designer site including:

Download SharePoint Designer from here

SharePoint WebPart Property Attributes

SharePoint WebPart Property Attributes

Following are Property Attributes:

WebBrowsable [WebBrowsable(True)]
"Indicates whether the designated property of a Web Parts control is displayed in a PropertyGridEditorPart object." (MSDN)
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.webbrowsableattribute.aspx

WebPartStorage [WebPartStorage(Storage.Personal)]
This attribute specifies what type of storage options the WebPart will make use of. The most common is Storage.Personal. "This property can be personalized by individual users. Its WebPartStorageAttribute value is Storage.Personal, which specifies that the property can be stored on a per-user basis. Only users with the Personalize Web Part pages right can set this property." (MSDN)
http://msdn2.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.webpartstorageattribute.aspx

Personalizable [Personalizable(true)]
Allows users the ability to personalize settings for the WebPart.
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.personalizableattribute.aspx

WebDispayName [WebDisplayName(string)]
Defines the Friendly Name for a property of a WebPart control. This is the name that will show up in the editor screen.
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.webdisplaynameattribute.aspx

WebDescription [WebDescription(string)]
Defines the string value to use as a ToolTip for a property of a Web Parts control. (MSDN)
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.webdescriptionattribute.aspx

SPWebCategoryName [SPWebCategoryName(string)]
Defines the friendly or localized name of the category of a property in the CustomPropertyToolPartcontrol inside the ToolPane.
http://msdn2.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.spwebcategorynameattribute.aspx

ConnectionProvider [ConnectionProvider(string)]
Identifies the callback method in a server control acting as the provider in a Web Parts connection, and enables developers to specify details about the provider's connection point. (MSDN) This is used to create connectable WebParts.
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.connectionproviderattribute.aspx

ConnectionConsumer [ConnectionConsumer(string)]
Identifies the callback method in a server control acting as the consumer in a Web Parts connection, and enables developers to specify details about the consumer's connection point. (MSDN) This is used to create connectable WebParts.
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.connectionconsumerattribute.aspx

Below is an example of how to use these attributes in your WebPart code.

[WebBrowsable(true),
Personalizable(true),
WebPartStorage(Storage.Personal),
WebDisplayName("Caption)"),
WebDescription("Set Caption"),
SPWebCategoryName("Other Options")]
public string Caption
{
get

{

return caption;

}
set

{

caption= value;

}
}

Properties will display in different formats according to the property type. (as displayed below)

Property Type	Display as
Bool	Check box
DateTime	Text box
Enum Drop	down box
int / string	Text box

Elapsed Counter Webpart for MOSS/Sharepoint 2007

Background: One of our clients wanted an Elapsed Counter Webpart, which shows the elapsed days & time from a specified start date. Start date should be persisted & user should be able to sett the value of Start Date & Caption string.


Solution: I developed a webpart using VS 2005 with help of javascript. Javascript code is used to display the ticking clock. Clock value is initilized using StartDate webpart property & user can set the value of startDate property at runtime. Another property named Caption is used to set the caption of counter. There are two approach to include the javascript resource(file) in webpart.
1: add as embedded resource(the case is have used in this solution). Advantage of this approach is you need not to deploy the js file separately in sharepoint environment. Bad part of this approach is you have to recompile entire solution if there any change in javascript [I have used this approach].
2: deploy to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS & refer the file there.

Step 1: Create new webpart project using VS 2005[C# is the language in my case] & add following code in webpart(.cs file)

using System;
using System.Drawing ;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace Safety
{
[Guid("b1ac74f7-0edf-4fca-90bd-51e109d4950b")]
public class SafeHours : System.Web.UI.WebControls.WebParts.WebPart
{
Label lblError;
System.DateTime startDate=DateTime.Now ;//default value for startDate
string caption = "Days without L.T.A.";//default value for caption

public SafeHours()
{
}

//add Caption property & attributes
[WebBrowsable(true),
XmlElement(typeof(System.DateTime)),
Personalizable(PersonalizationScope.Shared),
SPWebCategoryName("Other Options"),
WebPartStorage(Storage.Personal),
FriendlyName("Caption"),
WebDescription("Set Caption")]
public string Caption
{
get
{
return caption;
}
set
{
caption = value;
}

}

//add Start Date property & attributes
[WebBrowsable (true),
XmlElement(typeof(System.DateTime)),
Personalizable(PersonalizationScope.Shared),
SPWebCategoryName("Other Options"),
WebPartStorage(Storage.Personal),
FriendlyName("Start Date-Time (format: mm/dd/yyyy hh:mi:ss AM"),
WebDescription("Set Start Date Time")]
public System.DateTime Startdate
{
get
{
return startDate;
}
set
{
startDate = value;
}
}


protected override void CreateChildControls()
{

try
{
//embed java script file(dont' forget append the namespace of webpart before file name)
Page.ClientScript.RegisterClientScriptResource(GetType(), "Safety.elapsed.js");
base.CreateChildControls();
Literal litData = new Literal(); //Literal control to write the control values
Literal litDataTemp = new Literal();//Tempporary Literal control to write the control values

DateTime ts = this.startDate; //get Start date from webpart property

//here we assign the start date values to named td(s) of dummy table be used by Javascript code (replace [ with < & ] with >)

litDataTemp.Text = "[table style='font-size: 1 pt; width: 479px; color: white'] [tr] "+
"[td id='startYear_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Year +
"[/td][td id='startMonth_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Month +
"[/td][td id='startDay_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Day +
"[/td][td id='startHour_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Hour +
"[/td][td id='startMinute_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Minute +
"[/td][td id='startSecond_" + this.ID + "' style='height: 4px; font-size: 1pt;']" + ts.Second +
"[/td][/tr][/table]";

//add dummy table
this.Controls.Add(litDataTemp);

//add another table which shows the counter (replace [ with < & ] with >)

litData.Text = "[table style='width: 500px'] [tr] [td id='elapsedDays_" + this.ID + "' style='width: 700px; " +
"background-color: steelblue; font-weight: bold; font-size: 18pt; vertical-align: middle; " +
"color: white; height: 35px; text-align: center;'][/td][/tr][tr] " +
"[td id='elapsedHours_" + this.ID + "' style='width: 700px; background-color: lightsteelblue; " +
"font-weight: bold; font-size: 18pt; vertical-align: middle; color: black; height: 35px; " +
"text-align: center;'][/td][/tr] [/table]";
//add counter table
this.Controls.Add(litData);

//define new HtmlGenericControl to call the javascript function
System.Web.UI.HtmlControls.HtmlGenericControl c = new System.Web.UI.HtmlControls.HtmlGenericControl("script");
c.Attributes.Add("language", "javascript");
//call javascript function
c.InnerText = "showElapsedTime('" + this.ID + "','" + this.caption + "')";
//add javascript control
this.Controls.Add(c);
}
catch(Exception ex)
{
//add label to show the error
lblError = new Label();
lblError.ForeColor = System.Drawing.Color.Red;
lblError.Text = ex.Message;
this.Controls.Add(lblError);
}

}

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
}
}
}

Step 2: Javascript: Add a javascript file (elapsed.js in my case) in the root folder of webpart project & add following script:

function showElapsedTime(wid,caption)
{

var startYear = document.getElementById("startYear_"+wid).innerHTML;// initialize start year using named td of temp table ;
var startMonth = document.getElementById("startMonth_"+wid).innerHTML;//initialize start month using named td of temp table
var startDay = document.getElementById("startDay_"+wid).innerHTML;// initialize start day using named td of temp table
var startHour = document.getElementById("startHour_"+wid).innerHTML;//initialize start hour using named td of temp table
var startMinute = document.getElementById("startMinute_"+wid).innerHTML;//initialize start minutes using named td of temp table
var startSecond = document.getElementById("startSecond_"+wid).innerHTML;//initialize start seconds using named td of temp table
var startDate = new Date();
startDate.setYear(startYear);
startDate.setMonth(startMonth-1);
startDate.setDate(startDay);
startDate.setHours(startHour);
startDate.setMinutes(startMinute);
startDate.setSeconds(startSecond);

//alert(startDate);
var rightNow = new Date();
//calculate elapsed time
var elapsedTime = rightNow.getTime() - startDate.getTime();

//calculate elapsed days
var one_day=1000*60*60*24;
var elapsedDays = Math.floor( elapsedTime / one_day );
var milliSecondsRemaining = elapsedTime % one_day;

//calculate elapsed hours
var one_hour = 1000*60*60;
var elapsedHours = Math.floor(milliSecondsRemaining / one_hour );
milliSecondsRemaining = milliSecondsRemaining % one_hour;

//calculate elapsed minutes
var one_minute = 1000*60;
var elapsedMinutes = Math.floor(milliSecondsRemaining / one_minute );
milliSecondsRemaining = milliSecondsRemaining % one_minute;

//calculate elapsed seconds
var one_second = 1000;
var elapsedSeconds = Math.round(milliSecondsRemaining / one_second);

//write the out values to couter table
document.getElementById("elapsedDays_"+wid).innerHTML = caption+ elapsedDays ;
document.getElementById("elapsedHours_"+wid).innerHTML =elapsedHours +"Hrs : " + elapsedMinutes + "Min : " + elapsedSeconds + "Sec";

//set function timeout recurrsively
t = setTimeout("showElapsedTime('"+wid+"','"+caption+"')",1000);

}

Step 3: In solution explorer right click on elapsed.js --> properties & set Built Action to Embedded Resource.

Step 4: Build the solution & deploy to sharepoint server.


Step 4: Add the webpart to a webpart page & set Caption & Start Date-time properties in Webpart properties toolpane as given below:


Output: Here is the output