WebPart 101

Have been working on a SharePoint 2007 (MOSS) website for a few months now, and want to give a quick run-through of what’s what.

SharePoint is a huuuuuge animal, so if you say “implementing SharePoint”, that could mean 1000 different things !

In my case, it’s a “Publishing” site – an evolution of MCMS (Microsoft Content Management Server).  Meaning it’s a public facing “anonymous” website.

This entails many number of sub-concepts also – probably familiar to old MCMS’ers, but not for developers (ASP.NET’ers).

Won’t cover the “old name” and the “new name” (relating to MCMS) – the old folk know the “concepts” – and it’ll confuse the new players.

  • Master Pages
  • Page Layouts
  • WebParts
  • WebPartZones
  • Features

…and a new tool – SharePoint Designer.

Can delve into each of these in turn.  But for now…

The best place to start (from a coder like me) – is “show me the code !“.   Just to ease in those developer/s out there – not the way that you should do it !

WebParts

When first viewing a SharePoint page, you can change the page (Edit Page) and add additional “boxes” – called WebParts – within WebPart “Zones”.

These are chosen from a list of “template” controls, that have a lot of differing functionality.  What each does is modified simply by pointing and clicking (such as Content Editor WebPart, Page Viewer and Business Data Catalog).

NB. Before embarking on a SharePoint coding exercise, see if there are suitable out-of-the-box controls (WebParts) that you can configure – much better than having to code, deploy and test your coding efforts.

To create a new WebPart – you need a few tools :

The Windows SharePoint Services 3.0 SDK contains conceptual overviews, programming tasks, and references to guide you in developing solutions based on Windows SharePoint Services as a platform. The SDK includes information about the following technologies:

  • Web Part Framework Create, package, and deploy Web Parts on SharePoint sites.

Tools for developing custom SharePoint applications: Visual Studio project templates for Web Parts, site definitions, and list definitions; and a stand-alone utility program, the SharePoint Solution Generator.

Once all installed – just fire up Visual Studio – and we’re away.

New WebPart Project

In the example below, I’m (simply) going to create a “form” that captures some customer feedback – type, name, email, comment, etc.  (And you could then create a list item with the data, for example).

Click File, New Project, and you’ll see some additional options in the list of projects.

1

  • Select to create a new WebPart project – and Visual Studio will create an empty class library like this.

2

Uuumm, OK – that’s kinda cool & stuff – but where’s my designer ?

Where can I just drag on a textbox – and wire up events ?

Sorry – there’s no UI designer (none !) – you have to write out the Controls and HTML and “Render” the display, the same as all other SharePoint controls behave.

The important bits in the code (class) created :

public class XXnameXX : System.Web.UI.WebControls.WebParts.WebPart

This means the class inherits from the “WebPart” class library, from within the bowels of SharePoint (“the 12 hive”).

public XXnameXX()

The constructor – required, but just leave it blank (for now)

protected override void Render(HtmlTextWriter writer)

This is where all the work is done.  This squirts the necessary HTML into the SharePoint page, when served up from IIS.

You’ll see that Visual Studio has added a “commented out” example code line – with Output HTML. Why couldn’t they have put “hello world !”…!

Anyway – let’s uncomment it – and get the thing “installed/deployed” – and then can get into coding.

Now – things get a but ugly – and the waters are muddied.  Deploying a SharePoint WebPart is not easy – here goes :

  • Strong Name Key
  • GAC
  • Register As Safe
  • Add To Page !

Strong Name Key

As the DLL created will live in the Global Assembly Cache, we need a strong name key.    Jump to a Visual Studio command prompt, and type the following (change the project name to suit) :

snk -k “XXnameXX.sdk”

3

Copy the SNK file created to the project directory – and add to the solution.

GAC

Now – to install to the GAC. just need to jump to the “BIN” folder for the project – and run the “GACUTIL” command line :

gacutil /i XXnameXX.dll

Register As Safe

For SharePoint to acknowledge this as a known control (can see the GAC’ed DLL), we need to include this in the list of WebPart controls that are considered “safe”.

For this, we need to add an entry in the web.config file.

Step 1, find the web.config to edit.   This will be located within the “root folder” for the SharePoint web-site, as would have been created within IIS (or maybe from SharePoint Central Admin).

I had to go check within IIS…>

4

Step 2, open the web.config – I used Visual Studio (could use Notepad)

Step 3, add a row to the “SafeControls” section

5

The row you need to add looks like this >

<SafeControl Assembly=”XXnameXX, Version=1.0.0.0, Culture=neutral, PublicKeyToken=YYcodeYY” Namespace=”XXnameXX” TypeName=”ZZclassZZ” />

Best thing to do is just copy an existing row, and update as needed.

Step 4, determine details for your control

OK.   We now need to determine what to add to the “row” – so, go find your control within the GAC.

Open Windows Explorer – and navigate to C:\Windows\Assembly

Find your assembly, right-click & select Properties.

6

  • You’ll need your “namespace” – can copy/paste from inside Visual Studio
  • Culture – I haven’t ever known the full extend of this – have always left as “culture=neutral”.   Will determine the “options” for this one.
  • PublicKeyToken – originated due to the Strong Name key generated – and thus available within the GAC.  Highlight the text in the “Properties” window – and copy to clipboard.
  • Version Number – check from the GAC’ed DLL
  • TypeName – can specify an individual class within the DLL, or just * meaning all.

SAVE your web.config file – and that’s about it.

*PHEW*

Add To Page

Skip back to your SharePoint site.

Click Site Actions > Site Settings > Modify All Site Settings.

Under the list entitled “Galleries”- select WebParts.

Just need to tick the box for your newly added WebPart – and “Populate Gallery”

7

And when you go back to your Web Page, click “Edit Page”, and select to Add a Web Part.

Scroll down the list – and it will be included under “Miscellaneous”.   (will go through “later” how to change this “group” – and other decorations, like Description +  Icon)

8

And – here it is shown in “Edit Mode” >

9

And – now in “Display Mode” >

10

Deployment Woes ?

Coming from an old ASP.NET development mind-set, this seems pretty tricky eh ?

Much more tricky than “F5” for a web app.    Oh well, that’s something that hopefully NEXT SharePoint + Visual Studio can deliver.

There are “other” even more complicated ways of packaging (features) – more benefits, but additional deployment hoops.

Coding

Oh yeah – what about the CODING ??

Well – now that it’s installed and running, we can make some code changes – and see what happens (next post’s coming soon !)

Advertisements

10 thoughts on “WebPart 101

  1. Hi,
    I am new at Sharepoint, I wanted to know if you could guide and help me to solve the following problem:

    I have my main web application. Within it I have another application that uses a separate virtual directory.

    The problem comes when I try to install any webpart, it doesn’t installed and gives me this error:

    Some of the files could not be copied during the deployment of the solution.
    Details of the latest operation: MAD-SIS-VM-001: https: /myapplication/: formularios: Error: cannot find the web.config file section of this site. The controls specified assembly cannot be marked as .

    I don’t want to be placed in “formularios” (the app inside of my main app).

    I also have another environment for testing and when I install it, I have no problem, but in this environment doesn’t works!
    I don’t want to install the webpart (or feature) on “formularios” … I am avoiding something?
    how can I fix it?

    First of all thanks for your time, and we apologize for the inconvenience!

    PD: sorry is my English is not so good

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s