First a disclaimer: I am not a SharePoint Developer. My area of expertise is in administration and architecture design—and only as a hobby do I Master Pages, C#, CSS, and the like. Please don’t take any code that I write to be a best practice or even “correct”. The primary focus of this sample is to show the great ways to use Sandboxed solutions to deliver great UI and user experience.
I’m going to try and create a series of posts on how to create a set of easy to use web parts—that anyone with a SharePoint Site collection can use! *Caveat: requires SharePoint 2010 and Sandboxed Solutions to be enabled. Alright, Lets get started!
Pre-reqs:
1. A personal SharePoint 2010 Development Environment (Win7 works!)
2. Visual Studio 2010
1. Plan your Web Part
Here’s my plan: I found this great “Gauge” control by Mike Cherim at Green-Beast.com and thought I would show how to make the same control work on my SharePoint site. Here’s what Mike’s control looks like:
So here’s my web part roadmap:
1. Configurable Settings:
a. Gauge Title
b. Gauge Title Color
c. Gauge “Unit”
d. Gauge Goal Value
e. Gauge Actual Value
f. Gauge Fill Color
2. Solution Deployment of two background images
3. Code for rendering the web part
2. Create the Project
Open up Visual Studio 2010 and create a new project. Select “Empty SharePoint Project” (important: do NOT select the Visual Web Part option—this is a full trust code only solution) and follow the wizard—leaving “Deploy as a sandboxed solution” as your selection. Here I’m calling mine “BlogGaugeProject”.
3. Code: Create the Web Part & Web Part Panel Options
Our solution starts out empty, so let’s start by adding a web part control. If you right click on the name of your project in the “Solution Explorer” window you can navigate to “Add > New Item”.
Select “Web Part” and give it a name (I’m using “Static Gauge”):
This will create for us a pretty empty script “StaticGauge.cs” to work with—but it also creates some other important files and deployment pieces that we’ll get into later. First, let’s work on our web part by creating the configurable properties. These will be controlled on the web part panel which shows up on the right hand side of the page when you click “Edit this Web Part”.
We’ll insert each property we want to add (the list from the Design section #1 above) to the “public class StaticGauge : WebPart” section in the following form:
protected string m_CustomVar;
[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Display Name"),
WebDescription("Description")]
public string CustomVar
{
get
{
return m_CustomVar;
}
set
{
m_CustomVar = value;
}
}
Note that I do not add a custom value for “Title”—the web part already has a title field available via: base.Title
I’m not going to copy in all the code—the entire solution is available for download Here.
4. Code: Render the Controls
The render code is all in the “CreateChildControls” function. First I need to create a label to load in the CSS from Mike’s gauge. I put this inside #region tags to keep the page clean:
We paste in the CSS to the “CSS goes here” section and clean up the strings. Note: If you format your strings like I do here, you’ll need to remove Mike’s comments from the CSS to avoid “quote” collisions.
Next, we need to override the color inputs for Border and Fill colors—should they be provided in the input panel. We do this the easy way by just injecting them at the bottom of the style tag with a couple if statements (right before this line: “CSSLabel.Text += "</style>";”):
Alright—last piece! Let’s create the Gauge Label by converting Mike’s PHP to C#. We enter this and some basic calculations into the CreateChildControls block as well to draw the entire component!
5. Configuration: Hide the Web Part Chrome
Since the control has its own border, we don’t want to render the SharePoint chrome as well. We can configure this by opening up the “StaticGauge.webpart” file in the Solutions explorer:
We can add this custom property to the “<Properties>” node to remove the chrome:
<property name="ChromeType" type="chrometype">None</property>
While where here, we can provide a name and description for our web part. This is what shows up in the web part adder:
<properties>
<property name="Title" type="string">Progress Web Part</property>
<property name="Description" type="string">Track goal progress through this chart web part</property>
<property name="ChromeType" type="chrometype">None</property>
</properties>
6. Code: Add Pictures to the Solution
Super close! Mike’s gauge includes two images—so let’s add these to our solution pack to get automatically deployed! Right click on the Solution Name and again go to “Add > Add New Item”. This time Select Module and name it GaugeAssets:
Now there’s a new assets library that we can use to add objects to the “Assets Library” of the site we connect to. We can delete the “Sample.txt” file that is there and then by right clicking on the GuageAssets item in the solutions and going to Add > Add Existing Item we can copy the pictures from Mike’s design. We end up with this:
To make these elements deploy into the SiteAssets library (which already exists) we just need to add a URL field to the Module tag:
Now we can ensure our IMG sources always point to this full path by combining the Site Collection URL and this relative path. For example:
String m_imagepath = SPContext.Current.Site.Url.ToString();
"<img src=\""+(m_imagepath)+"/SiteAssets/GaugeAssets/cdg_tmom.gif\" width=\"60\" height=\"300\" alt=\"\" />"
7. Code: Run it!
Hit F5—and you’ll launch into your SharePoint Site. If we edit the home page, we’ll see our new web part in the Web Part Adder (in the “Custom” section)! Drop it on the page and play:
The complete sandboxed solution for the web part is available for download in full here. Source is in a ZIP file here.
Hope this post is useful! Feel free to give me feedback on the types of posts in the comments section.