You know how to make a web part, but do you know how to get it to your production environment in the proper way?

In a past post, I did a WSS 3.0/MOSS 2007 Web Part Tutorial that showed how to make a web part.  That's all great and grand, but I did not cover how to actually get it to your production environment (truth is I didn't know how at the time).  Technically, you could install VS 2008 and the extension package on your production farm, but that isn't necessarily a good idea or 'best practice' by a long shot.  What you want is one nice neat file that you can take to your server and upload as a feature, that is what this tutorial is all about (most of this info was deciphered from the SharePoint 2007 SDK.)

We are going to assume that you already made your web part, and I am going to use the one from my past tutorial as the example for simplicity's sake.

Setup your Solution Structure

In order for this to compile correctly, your web part and cab projects must be inside the same solution.

• Here we go: Open Visual Studio and Choose File > New Project, once in that dialogue, click on Other Project Types > Visual Studio Solutions and choose Blank Solution. Name it something, I am going to use TestSolution for mine.
• This is a tricky part, but it is to keep the solution folder open and not go to a smaller project when we import one: In the Solution Explorer, right click on the solution and choose Add > New Solution Folder and name it dummy -- we will delete this later, but we need it for a moment.
• In the Solution Explorer, right click on the solution and choose Add > Existing Project now navigate to your existing csproj (in my case, WPs.csproj) and click OK.
  
• Now, in the Solution Explorer, right click on the solution and choose Add > New Project click on Other Project Types > Setup and Deployment and choose CAB Project name it and click OK (I named mine TestCab).
• Now go back and delete the dummy folder.

Now you have the proper setup and structure to your folder.  Only a couple more steps and we will have a nice portable web part.  Your Solution Explorer should now look like this:

Prepare your Manifast and dwp files

These are required in order for your cab to be properly set up and used by SharePoint.

• Right click on the Web Part Project inside the Solution and add an XML File, name it Manifest.xml, insert the following text into the file (notice the noly changes you might need to make are to the Namespace, which is used in your .cs file of the webpart, and FileName attributes):

[code:xml]

<?xml version="1.0"?>
<!-- You need only one manifest per CAB project for Web Part Deployment.-->
<!-- This manifest file can have multiple assembly nodes.-->
<WebPartManifest xmlns="http://schemas.microsoft.com/WebPart/v2/Manifest">
    <Assemblies>
        <Assembly FileName="WPs.dll">
            <!-- Use the <ClassResource> tag to specify resources like image files or Microsoft JScript files that your Web Parts use. -->
            <!-- Note that you must use relative paths when specifying resource files. -->

            <ClassResources></ClassResources>

            <SafeControls>
                <SafeControl
                  Namespace="WPs"
                  TypeName="*"
                />
            </SafeControls>
        </Assembly>
    </Assemblies>
    <DwpFiles>
        <DwpFile FileName="WPs.dwp"/>
    </DwpFiles>
</WebPartManifest>

[/code]

•  Now right click on the sameProject and add another xml file, name this one your_web_part_name.dwp, for my example I am using WPs.dwp.  Notice that it is the same as specified in the FileName attribute in the xml file above -- add this text to your dwp file:

[code:xml]

<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
    <Title>Title goes here</Title>
    <Description>Put your description here.</Description>
    <Assembly>WPs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=9f4da00116c38ec5</Assembly>
    <TypeName>WPs.Test</TypeName>
    <!-- Specify initial values for any additional base class or custom properties here. -->
</WebPart>

[/code]

The only part that may be a snag for some people is populating the <Assembly>'s PublicKeyToken and  <TypeName> tags in the above XML file.  Let me try and explain what and how to get these values:

• To get the <Assembly>'s PublicKeyToken you need to go to your test machine, where the code was compiled and get the PublicKeyToken - that is the value you enter there.
• As for the <TypeName> that is simply the Namespace.WebPartName of the web part itself.
• Now right-click on your CAB Project and choose Add > Project Output once in that dialogue, choose Primary Output and Content Files, Click OK.
• Right-click again on the CAB Project and Choose Add > File then browse you your dwp file you just made (mine is WPs.dwp), click Open and save your Solution.
  

You should now have everything set up correctly, your Solution Explorer should look like this:

Build and Deploy

All the hard work is done, now just build and deploy.

• Right click on the solution and choose Build Solution - this makes your portable web part, just look in your solution folder, in my example it is located at TestSolution\TestCab\Debug\TestCab.CAB - if you will notice, that is just: Solution_Name\Cab_Project_Name\Debug\CabFile.CAB.
• Now that you have your file, copy it to your production environment to the folder: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\bin\

• Then run the command (from that directory):

   

  stsadm -o addwppack -filename Time_Zones.CAB -url http://your_url_here -globalinstall -force

   

• And run an iisreset.

You are all done.  You should have your web part available to all of your users on the farm now.  And you can pass out the .CAB file to whoever wants it without any messy code to worry about!

Displays 6 Time Zones of your choosing, fully customizable

Previously I showed how to build a web part from scratch.  This is my first fully-featured web part.  The javascript was mostly stolen from some unknown source that had been wandering around my shop for years.  Other than that, the web part is all me.  The javascript I was given was just the 6 time zones we use over here (I am working in the Middle East right now) and I got tired of every different division wanting a different set of time zones, so I just made it so they could modify it themselves; now everyone is happy.

To install, place the Time_Zones.CAB file into the magical directory of:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\bin\

Then run the command (from the same directory):

stsadm -o addwppack -filename Time_Zones.CAB -url http://your_url_here -globalinstall -force

Then simply run an iisreset and your web part is ready to use.  The full zip file includes the CAB as well as all the original code so you can modify it if you want.  Otherwise, just download the CAB if you want to simply use the part, enjoy!

So you want to build your own web part eh?

Your solution explorer should now be populated with a bunch of files and references like this:

Now really there are only a few files you need to concern yourself with.  The most important one being the <WebPartName>/<WebPartName>.cs file, in my case it is Test/Test.cs; I will refer to this file as the main file from now on.  I say it is the most important as that is the one that does everything from presentation to code-behind.  The others are the <WebPartName>.webpart file and possibly the AssemblyInfo.cs file, but we will focus on the first right now.

Open up the main file and you will see something like this:

Where you see “TODO: …” is where you are going to put your rendering code.  They even provide you with the always-friendly “Hello World” program if you just un-comment it.  The Guid is automatically populated when you make your project, so don’t mess with it.  The big thing here is that 100% of your styling and layout has to be taken care of back here.  There is no aspx page to your aspx.cs like a normal .net web page.  Once you have a handle on that, it can be treated just like any other asp.net website you have ever made.  There are some other great interactive tools and features you can include, but that is for another day.  Right now, just use the “Hello World” code, use my supplied code or fill it up with your own.

NOTE: Often times it is easier to get your programming logic done in a regular Visual Studio Project as there is no way to easily test in a SharePoint Web Part Project.

Now that you have your code finished, we can change a few other things.  Open the <WebPartName>.webpart file and you can see some properties you can change.  Customize the Title and Description if you like.

That will change the default settings for this web part.  That is all I would mess with for right now.  So in theory, you now have a 100% working web part.  Now is the easy part.  Just right click on your project and click ‘Deploy’.

Assuming everything worked, you know have published your web part to your portal.  If it didn’t work, go fix your bugs and come back :PGo to your Portal->Site Actions->Site Settings->Modify All Site Settings and click on Web Parts under Galleries and you should see your Web Part with a happy little ‘!NEW’ by it.

Now just go to a Web Part Page and put it in there somewhere then exit edit mode.  You should now see your web part in action:

Here is my example web part you can take a look at.  It shows a couple different methods of how you can make a web part interact with itself.  As I mentioned above, there is a lot you can do with web parts beyond this, and I will hopefully be able to post some more in the near future.

UPDATE

I wrote a tutorial on how to package and deploy a web part once you make it.

Source Code: