Using Sitecore WebControl to Customize Google Calendar Reminder Button

Jun 25, 2012
Pablo Bustamante

Oshyn WebControls Sitecore Google CalendarWebControls 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">

 

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 parts serie): 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