Ruwen Jin
Oct 25, 2009
(2 votes)

Gadget Gadget Gadget


This gadget make it possible use Google Gadget as EPiServer Site Center Gadget. Currently there are more than 170000 Google Gadgets and we can now use them in EPiServer Site Center.


  • Select Google gadget by list or search.
  • Edit setting for each gadget. 



image image image image





This module currently don’t support in virtual directory. Url for your site should look like http://someserver/ not start as http://someserver/andmore/

  • Unzip the files.
  • copy file to your site
  • add following lines in web.config:

    <modules autoDiscovery="Minimal">
     <add name="GoogleGadget">
                         <add assembly="EPiServer.Research.Gadget.GoogleGadget"/>


2 minutes MVC for EPiServer Site Center gadget crash course:

  1. Model :
    • Create a class that presents object will needed in your gadget. i.e in this gadget we need GadgetSetting .
  2. View:
    • All UIs that you will need in your gadget. Most cases you will need one for view mode and one for edit mode. Views need have definition on which class ( Model ) they are using. In this gadget we have three views. One for view mode and other two for edit mode ( we created a wizard in edit mode ). A tips here for a beginner as me. If you want to see how a Model should be render in View. Just click “Add view” and choose “Create a partial view” and “Create a strongly-typed view” and choose your class and select right in “View Content”.
  3. Controller:
    • Create Controller that contains functions that you need. Important thing is all methods that will present as UI ( view ) should return ActionResult. And return value should be View(“<your view name>”, <data for your view>). One special things with Gadget APi is that it will always send the gadget id to your method so your method should take a Guid as first parameter. When gadget doesn’t configured the gadget id will be Guid.Empty.

Tips for using Dynamic Data Store:

  1. Create data store: the parameter should be false in production and true during the development. ( since you will change your data structure and want remapping the data schema ).
    • DynamicDataStore<Models.GadgetSetting> store = DynamicDataStore<Models.GadgetSetting>.CreateStore(false);
  2. Get data:
    • Models.GadgetSetting setting = store.Find("GadgetId", gadgetId).FirstOrDefault<Models.GadgetSetting>();
  3. Save data: It is a bit tricky if you didn’t have object that implements EPiServer.Data.Dynamic.IDynamicData . When you insert new data to datastore it is straight forward:
    • store.Save(setting2);
  4. When you update an existing data you need first get it from datastore and change it and save it back:
    • Models.GadgetSetting setting2 = LoadSetting(setting.GadgetId);
    • setting2.URL=”sfs”;
    • store.Save(setting2);

About the client script

In some samples scripts use live method to bind event. In most cases it works but if you have multiple step in settings you should use bind instead.

Function to get DOM objects in JavaScript is $(“object jquery expression”,gadgetContext.instance) which make sure selection is done inside the gadget not global.


Other resource to create gadget:


Don’t forget join to contest

Oct 25, 2009


Sep 21, 2010 10:32 AM

Impressive and awesome idea Ruwen!
/ Joel Abrahamsson

Sep 21, 2010 10:32 AM

Cool! This was on my shortlist of ideas too, but you beat me to it :-) Great implementation.
Follow-up ideas: Gadget to hold web-form user controls, gadget to hold web parts and gadget to hold other gadgets (like a composer layout block).
/ Allan

Please login to comment.
Latest blogs
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog

Video Demonstration, creating a CMS12 Alloy Sample Site

Hey All Below you will find a quick video demonstration on how to install a local version of Alloy Sample based on CMS12 / .Net 6. As you will see ...

Minesh Shah (Netcel) | Nov 28, 2022

How to create an admin user I Optimizely CMS – with Episerver CLI

In this blog post I’ll show how to create an admin user for Optimizely CMS in a new environment where you don’t have access to the admin interface.

Ove Lartelius | Nov 28, 2022 | Syndicated blog