Adding Google Gadgets to Sitefinity

With the official release of Sitefinity 3.0 yesterday, a whole new world of easy web development has been opened-up for ASP.NET web developers. Sitefinity allows you to forget about "basic" website plumbing (like user management, caching, and site management) and instead focus on adding content and modules to your site that are unique to your business. Using Sitefinity as a starting point, you can have a powerful, easy to manage site up and running in a day instead of a week (or more).

One of the easiest ways to extend the functionality of Sitefinity is by creating UserControls (the plain 'ol .ASCX variety) that content creators can visually add to any page. What we're going to look at today is how we can build a simple user control that enables us to add any Google Gadget for Syndication to our Sitefinity pages. This short tutorial will show you how easy it is to add new functionality to Sitefinity and show you how you can begin to consume the thousands of Google Gadgets in your Sitefinity sites.

Step 1
The first thing we need to do is build a UserControl that will allow us to add a Google Gadget to our Sitefinity pages. You might think that the Generic Content control that ships with Sitefinity would work for this, but unfortuntely it does not handle script references like we need it to for this to work. No problem, though. The UserControl we need is very simple.

Open Visual Studio and create a new .ASCX file called "GoogleGadget.ascx" (for simplicity, include the code in the same file as the markup). We are going to add a single property to our UserControl and a single Literal control. Your markup for the control should look like this:



Step 2
Now that we have created our UserControl, we need to add it to our Sitefinity site. To do that, open your Sitefinity site administration area and navigate to the Pages section. Once there, click on any page in your site.



Click on the page's "Edit this page" button to enter the page edit mode. From here we can upload our UserControl. On the lower right hand side the page edit screen, you'll see a button labeled "Upload control". Click that to open the upload control dialog.



In the upload dialog, we will enter the control's name, group and description. These details are used to represent the control in the Sitefinity Control Toolbox. We'll also use the file upload control to locate the UserControl we just created on our filesystem and upload it (via the "Upload" button). With the details filled-in and the UserControl uploaded, we can click on "I'm done" to continue.

Step 3
Now that the UserControl has been added to Sitefinity, we need to add it to our page. Look for the UserControl in a new "User Controls" group in the Sitefinity Toolbox. When you find it, drag and drop it in any content area on your page.

 

Step 4
Before we can configure our UserControl, we need to find a Google Gadget to use. The Google Gadget directory is full of controls that you can add to your site. When you find a control you like, click on it to view the control's details and configuration screen. For this demo, we'll add the "World Sunlight Map" to our Sitefinity site.


Once you've adjusted the height, width, border, and any other available settings for your gadget, click on the "Get the Code" button to reveal the URL for the gadget. To use this with our UserControl, we only want the URL to the src for the gadget. We don't want the script tags.



Step 5
Next, we need to configure our UserControl to use the URL for our selected Google Gadget. Return to your Sitefinity administration page edit window and click on the "Edit" link on the UserControl you added to your page. That will open the control configuration window where you should see two properties: ID and GadgetSource. ID is a default property added to all controls and GadgetSource is the property we added to our UserControl back in Step 1. Paste the URL to the Google Gadget in the GadgetSource textbox and click "I'm Done".



When you look at your page in edit mode, you should now see the Google Gadget rendered on the page.



Step 6
Finally, save your edited Sitefinity page and click on the "Live Site" button in your Sitefinity navigation. This will load the live version of your Sitefinity site where you should now see your Google Gadget running in all its splendor. See the live version of this gadget running on the new Sitefinity powered Telerik Watch.



As you can see, it is very easy to extend Sitefinity with UserControls. There is no special code required to make UserControls work, so this should be "old hat" for any experienced ASP.NET developer. And while this demo is very simple, you could just as easily perform more complicated actions in your UserControl just as you would in a normal ASP.NET site.

Download Google Gadget UserControl