Using Sitecore WebControl to Customize Google Calendar Reminder Button

WebControls allow the creation of reusable atomic components that fits well with the needs of semi-static HTML components. For this example of how to use WebControls in semi-static HTML components, we have created a Google Calendar Reminder button that can easily be reused/expanded. The code is a basic Sitecore WebControl with some custom parameters for setting the start/end times, location, details, title and item of the event.

Here is the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Sitecore.Web.UI;
using System.ComponentModel;
using System.Collections.Specialized;
using Sitecore.Data.Items;
using Sitecore.Data.Fields;
using Sitecore.Diagnostics;
using Sitecore.Data;

namespace Oshyn.Sitecore.WebControls
{
 public class GoogleCalendarReminder : WebControl
 {
 private readonly string googleCalendarReminderHtml = “”;
 private readonly string googleCalendarButton = “http://www.google.com/calendar/images/ext/gc_button2.gif”;
 private string startDateTime = string.Empty;
 private string endDateTime = string.Empty;
 private string title = string.Empty;
 private string location = string.Empty;
 private string details = string.Empty;
 private string itemId = string.Empty;

 [Category(“Method”), Description(“Start DateTime for the Event”)]
 public String StartDateTime
 {
 get { return startDateTime; }
 set { startDateTime = value; }
 }

 [Category(“Method”), Description(“End DateTime for the Event”)]
 public String EndDateTime
 {
 get { return endDateTime; }
 set { endDateTime = value; }
 }

 [Category(“Method”), Description(“Title for the Event”)]
 public String Title
 {
 get { return title; }
 set { title = value; }
 }

 [Category(“Method”), Description(“Location for the Event”)]
 public String Location
 {
 get { return location; }
 set { location = value; }
 }

 [Category(“Method”), Description(“Details of the Event”)]
 public String Details
 {
 get { return details; }
 set { details = value; }
 }

 [Category(“Method”), Description(“Item Id of the Event”)]
 public String ItemId
 {
 get { return itemId; }
 set { itemId = value; }
 }

 protected override void DoRender(System.Web.UI.HtmlTextWriter output)
 {
 NameValueCollection googleCalendarParams = new NameValueCollection();

 if (string.IsNullOrEmpty(startDateTime)) //required value
 return;

 if (string.IsNullOrEmpty(endDateTime)) //required value
 return;

 if (string.IsNullOrEmpty(title)) //required value
 return;
 try
 {
 Item cEvent = GetItem();

 if (!string.IsNullOrEmpty(itemId) && global::Sitecore.Data.ID.IsID(itemId))
 cEvent = Sitecore.Context.Database.GetItem(new ID(itemId));

 DateField start = cEvent.Fields[startDateTime];
 DateField end = cEvent.Fields[endDateTime];
 string gLocation = cEvent[location];
 string gDetails = cEvent[details];

 googleCalendarParams.Add(“dates”, string.Format(“{0:yyyyMMdd’T’HHmmss’Z’}/{1:yyyyMMdd’T’HHmmss’Z’}”, start.DateTime.ToUniversalTime(), end.DateTime.ToUniversalTime()));
 googleCalendarParams.Add(“action”, “TEMPLATE”);
 googleCalendarParams.Add(“text”, HttpUtility.HtmlEncode(cEvent[title]));
 googleCalendarParams.Add(“sprop”, Context.Request.Url.Host);

 if (!string.IsNullOrEmpty(gDetails))
 googleCalendarParams.Add(“details”, HttpUtility.HtmlEncode(gDetails));

 if (!string.IsNullOrEmpty(gLocation))
 googleCalendarParams.Add(“location”, HttpUtility.HtmlEncode(gLocation));

 var response = string.Format(googleCalendarReminderHtml, ToQueryString(googleCalendarParams), googleCalendarButton);

 output.Write(response);
 }
 catch (Exception ex)
 {
 Log.Error(“Error on Google Calendar Reminder, method: DoRemder”, ex, this);
 }
 }

 // code from http://stackoverflow.com/questions/829080/how-to-build-a-query-string-for-a-url-in-c
 private string ToQueryString(NameValueCollection nvc)
 {
 return “?” + string.Join(“&”, Array.ConvertAll(nvc.AllKeys, key => string.Format(“{0}={1}”, HttpUtility.UrlEncode(key), HttpUtility.UrlEncode(nvc[key]))));
 }

 }
}

To use this code, add the registration section in your aspx/ascx file and then set the control with the necessary parameters for it to display the button. Once that is done, it will look something like this:

<%@ register tagprefix="gcal" namespace="Oshyn.Sitecore.WebControls" assembly="Oshyn.Sitecore">

 <gcal:googlecalendarreminder runat="server" itemid="{2A37207A-E546-4016-9ED5-1250B199C6DC}" startdatetime="Start Date" enddatetime="End Date" title="Title" location="Location" details="Description">
</gcal:googlecalendarreminder>

For simple, semi-static HTML integrations, it is a good idea to use WebControls which give you the ability to be reuse them in multiple locations. To check out how to build more controls, check out these links:

- Sitecore Introduction (3 part series): http://sdn.sitecore.net/Articles/Web%20Controls/Building%20Web%20Controls%20-%20Part%201.aspx

- Stackoverflow : http://stackoverflow.com/questions/7070006/where-can-sitecore-webcontrol-examples-be-found

- Google Calendar Reminder Button: http://www.google.com/googlecalendar/event_publisher_guide_detail.html

---