How to Create a Gadget

Pre-Requisite

ASP.NET MVC

You will need to download and install ASP.NET MVC from http://www.asp.net/mvc/download/; you can either use the Web Platform Installer or just run the installer.

If you are entirely new to ASP.NET MVC you can read more about it here: http://www.asp.net/mvc/learn/

Introduction

This document is meant to guide you through the steps needed to create a SiteCenter Gadget, the gadget created here is also included in the SiteCenter CTP sample shipped with the CTP.

Create a SiteCenter Site

1. Install a regular EPiServer CMS site
   
   
   
2. When prompted, choose to install Public Templates
   
   

Creating the MVC project structure

If you would like to have ASP.NET MVC tools enabled for the Public Templates project, you will need to open the project in a text editor and locate <ProjectTypeGuids> add {603c0e0b-db56-11dc-be95-000d561079b0}. This will tell Visual Studio that this is an ASP.Net MVC project.

1. Open PublicTemplates.csproj
2. Add two references
• System.Web.Mvc
   
  
• EpiServer.Shell.dll, located in the bin folder
   
3. Create four folders, these are used by the MVC framework
   
   a. Content
   b. Models
   c. Controllers
   d. Views

Create your first gadget

Now we are ready to create our first gadget, it won’t be a Hello World gadget, but something more useful. An under construction gadget!

Your first controller

1. Right click on the Controllers folder and do Add->Controller…
2. Name it ConstructionController, the suffix Controller is very important for MVC
   
   

Now we need to add some attributes to the controller so that SiteCenter recognize the gadget. First we need to add the [Gadget] to the class; this will tell the Dashboard that this is a gadget. This is the bare minimum that is required on the controller; we however would like to add some more nifty features.

We want to use some specific CSS classes in our gadget so we need to tell the dashboard where they are located, just add [CssResource ("…")], [ScriptResource("...")],[LocalizationRescource(typeof(YourType))] to the class. It is possible to add more than one client resource, just keep stacking the client resource attribute on the class.

Your controller class should now look something like this:

Create the Construction View

Under Views:

1. Create a new subfolder called Construction and in the subfolder add a new Partial View called Index.
   
   
   
   

You should now have a project tree looking something like this:

If you open the Index.ascx now you will see that it is pretty empty, so you will need to add some markup there, this is what will be displayed in the dashboard. If you look in the attached source code you will find the view markup, css and images. We will only show markup here, the rest you will have to add to the project manually.

The complete project tree should look something like this:

One more thing

If you compile the project and browse to your SiteCenter Dashboard you will see that your gadget isn’t displayed and it is not possible to add it via the menus. There is still one more thing that you will need to do, you have to tell SiteCenter that this assembly should be treated as a plug-in assembly to SiteCenter.

So open web.config and locate the episerver.shell/plugInAssemblies and add your assembly, if you haven’t change the output assembly for public templates it should look like this:

1. Reload the dashboard, you should now be able to see your gadget in the list of aviable gadgets.
   
   
    
2. Add the gadget to the dashboard