Sharepoint silverlight World Analog Clock Webpart


Hi,

SharePoint 2010 has built-in support for Silverlight Web Parts, making it easy to get Silverlight applications up and running. But in real scenarios sometime requirement needs more customization then its hard to integrate the requirement with out of box WebPart. In this article I will explain how a SilverLight application can be integrated to the sharepoint webpart.

Requirements of WebPart:

Analog clock should be displayed to the home page of the site which can be personalized and customizable for the normal user. User can add as many as world clocks as he/she want and set the timezone and able to do basic configuration. following are the key points of the requirnments.

  • Can add multiple clocks to the WebPart.
  • Can display the time only
  • Select desired Time Zone from the list
  • Change clock title
  • Show/Hide seconds hand
  • Show/Hide milliseconds dial
  • Show/Hide tenth seconds dial

Explanation:

After goggling few I found Bamboo webpart which is pretty fine for me and fits my requirements but unfortunately got some error on test server related to safe control which is beyond my approach to fix. Finally I found a open source WebPart on codeplex which perfectly suits my requirement except adding multiple clocks. Then i have downloaded the code and did some of customization with the share point project as well as silver light project.

To add More clocks, I followed the given steps:

I modified the Sharepoint clock webpart class(ClockWebpart.cs) to create a new property called “Clocks”

#region Properties
protected ClockWebPart ParentWebPart
{
get { return this.Parent as ClockWebPart; }
}
protected List<EditorControls.ClockWebPart.EditorParts.Clock> Clocks
{
get
{
return Serialization.Deserialize(ParentWebPart.Clocks);
}
}
#endregion
private string _clocks =string.Empty;
[Personalizable(PersonalizationScope.Shared),
WebBrowsable(false)]
public string Clocks { get { return _clocks; } set { _clocks = value; } }
Next step is to modify the user control of the web part to pick the value from the user and then implement the Render method as follows:

protected override void Render(HtmlTextWriter writer)
{
if (Clocks.Count>0)
{
foreach (var clock in Clocks)
{
AddClock(clock);
}
}
base.Render(writer);
}
private void AddClock(EditorControls.ClockWebPart.EditorParts.Clock clock)
{
ClocckContainer.Controls.Add(new Literal { Text =
"<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='150px' height='150px'>" +
"<param name='source' value='~/_layouts/SharePoint.Silverlight.Clock/SilverlightClock_MVP.xap' />" +
"<param name='onError' value='onSilverlightError' />" +
"<param name='background' value='Transparent' /> " +
"<param name='windowless' value='true' />" +
"<param name='minRuntimeVersion' value='4.0.50826.0' />" +
"<param name='autoUpgrade' value='true' />" +
"<param name='initParams' value='" + GetInitParams(clock) + "' />" +
"<a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0' style='text-decoration: none'>" +
"<img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style: none' /></a></object>"
});
}

Also, create a new class "Clock":

using System;
namespace SharePoint.Silverlight.Clock.EditorControls.ClockWebPart.EditorParts
{
[Serializable]
public class Clock
{
public string ClockTitle { get; set; }
public bool ShowDigitalClock { get; set; }
public bool ShowSecondHand { get; set; }
public bool ShowMilliHand { get; set; }
public bool ShowTenthsHand { get; set; }
public string ClockTimeZoneId { get; set; }
public string UtcOffsetTicks { get; set; }
internal Clock(string clockTitle, bool showDigitalClock, bool showSecondHand, bool showMilliHand, bool showTenthsHand, string clockTimeZoneId)
{
ClockTitle = clockTitle;
ShowDigitalClock = showDigitalClock;
ShowSecondHand = showSecondHand;
ShowMilliHand = showMilliHand;
ShowTenthsHand = showTenthsHand;
ClockTimeZoneId = clockTimeZoneId;
try
{
if (!string.Equals("0", clockTimeZoneId))
{
var tzId = TimeZoneInfo.FindSystemTimeZoneById(clockTimeZoneId);
UtcOffsetTicks = tzId.BaseUtcOffset.Ticks.ToString();
}
}
catch { }
}
public Clock()
{
}
}
}

Next, I modified the EditorBase class in two methods:

public override bool ApplyChanges()
{
ClockWebPart wp = this.WebPartToEdit as ClockWebPart;
EditorPartMain partMain = this.FindControl(ID + "EditorPartMain") as EditorPartMain;
wp.Clocks = partMain.AddedClocks;
return true;
}
public override void SyncChanges()
{
EnsureChildControls();
ClockWebPart wp = this.WebPartToEdit as ClockWebPart;
EditorPartMain partMain = this.FindControl(ID + "EditorPartMain") as EditorPartMain;
partMain.AddedClocks = wp.Clocks;
partMain.Initialize();
}

With some modifications in the silverlight like height and width adjustments. This code will provide functionality to add more clocks to the webpart.

Note: For beginners of the silverlight use following trik to scale down the clock:

<Grid.RenderTransform>
<ScaleTransform x:Name=”CanvasScale” ScaleX=”.5″ ScaleY=”.5″></ScaleTransform>
</Grid.RenderTransform>

Happy sharepointing

Advertisements

6 thoughts on “Sharepoint silverlight World Analog Clock Webpart

  1. Hi Mohitvash
    I’ve downloaded the source code from codeplex, but when I open it from VS2010, it require username and password for Team Foundation Server. I typed my username and password on codeplex, but it failed. When I escape the authentication, the SilverlightClock_MVP project can’t be loaded.
    Could you please advise how to disconnect the project from TFS?

    Regards,
    Joko

    Like

  2. Hi Joko,

    Based on the information you shared with me, It seems TFS authentication is not a issue here. If you escaped the authentication then project tries to load in “Offline” mode. I recommend if you please search for exact error at time of project load, visit VS output window. As you are saying “SilverlightClock_MVP” project is not loading, then you are probably getting the error
    “The imported project “C:\Program Files (x86)\MSBuild\Microsoft\Silverlight\v4.0\Microsoft.Silverlight.CSharp.targets” was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.”

    To resolve this issue you have to enable the Silverlight Patterns application, you must have the Silverlight 4 Tools for Visual Studio installed (http://www.microsoft.com/downloads/details.aspx?FamilyID=40ef0f31-cb95-426d-9ce0-00dcfabf3df5&displaylang=en).
    If you are facing any other issue, then please share some information of error.

    Regards
    Mohit

    Like

  3. Thanks Mohit, you are right, i just need to work with offline mode. And it works now.
    But I have a query regarding the above code:

    protected override void Render(HtmlTextWriter writer)
    {
    if (Clocks.Count>0)
    {
    foreach (var clock in Clocks)
    {
    …..

    The variable “Clocks” on that function refers to what? Is it refers to the new property “Clocks” on the class(ClockWebpart.cs)?
    Or should I declare it on the user control of the web part?

    Thanks.

    Like

    1. Good to know you have resolved earlier issue.
      Yea, Clocks is a webpart property declared in ClockWebpart.cs class. This was first step I mentioned while starting customizing the existing code. No need to declare this in user control. User will get option while editing the webpart that which enables user to set clock count that will be shown on webpart. Again I am sharing the code:

      private string _clocks =string.Empty;
      [Personalizable(PersonalizationScope.Shared),
      WebBrowsable(false)]
      public string Clocks { get { return _clocks; } set { _clocks = value; } }

      Regards
      Mohit

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

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