Creating your own custom components for use in SharePoint
Again, one of the questions raised during a current assignment. How do I make s custom component for inclusion in SharePoint Designer, or any ASP.net page for that matter.
Truth is, this is fairly easy, but you need to make sure you get every step correct. I will explain the steps along the way.
First, as always, use a class library template in Visual Studio. While you can make it by hand in notepad, Visual Studio is a great editor and makes development a lot easier. Make sure you pick a namespace and class name that you like, it is far easier to set one in the beginning than to change later. Not impossible, just a bit more work. I’ll use CustomComponent for this example. Create a solution like this:
Next, rename the file class1.cs to the name you want to use for your component. I’ll use HelloWorld.cs, use whatever you want. This will allow you to rename the class as well, accept this or manually change the class name to the name you want for you component.
At this point it is worth pointing out a few things. When you are going to insert your custom component you will do so by adding something along the lines of this:
Tagprefix is assigned in the page where you want to use the component. You can specify whatever you want on a page-by-page basis, so no reason to care too much about it at the moment. helloworld on the other hand is, and must be, the name of the class you create in your solution. Even though we do some decorating of that class, some of which may suggest that we could use a different name of the class and in the ASP.net tag, the helloworld part of the tag must match the name of the class.
Back to Visual Studio, lets get going on creating the actual component. First, we add some references. Rightclick References under you project in solution explorer and then click Add Reference. In the Add Reference dialogue, go to the .Net tab and find System.Web, then click Ok.
Although not required for this example, which will be a simple HelloWorld component, you may want to reference the SharePoint dll if you are creating a component that will use SharePoint data. This dll is called Windows Sharepoint Services in the .Net tab of the Add Reference dialogue. You may also browse to it if you have the Microsoft.SharePoint.dll located somewhere else.
Next, in the HelloWorld.cs file, add the following code at the top, or close to the other using-statements:
We are creating a webcontrol here, so make sure you class inherits from the WebControl class by adding “: WebControl” after you class name.
Finally, add the following statement right before your class name:
Your class should now look something along the lines of this:
You need to sign your assembly to create a strong named assembly. To do this, rightclick on your project and select properties. go to the tab saying Signing and click ‘Sign the assembly’. In the ‘Choose a strong name key file’ drop-down, select New… and type in a name for your key file. any name will do. If you have a key file already, you may, of course, us that. Use a password if you feel like it. Close the properties page.
To get some output from our component we need to override one of the WebControl classes, called RenderContents. Modify your class to look like this:
public class HelloWorld : WebControl
protected override void RenderContents(HtmlTextWriter writer)
You may use this overrided method or create your own method to modify the output or functionality in whatever way you want.
At this point we are finished with the class. Compile it. You’re done creating the component. Pat yourself on the back.
Now it is time to add our new component to a page. First we need to deploy our dll. It should be located in the bin/debug folder for your project. Drag the dll into the global assembly cache (GAC), at c:\Windows\Assembly. Next, you need to find the strong name of the dll. In the GAC, right click your component dll and click properties. You need four parts from the property sheet, Name, Culture, Version and Public Key Token. Assemble these parts into the four-part strong name as such:
“CustomComponent, Version=220.127.116.11, Culture=neutral, PublicKeyToken=17135d9fcba0119f”
Substitue the values for your own.
The component needs to be added to the safe controls for the web application where you intend to use it. To do so, find the web.config file, open it and locate the SafeControls node. Add a new node, such as this, using your four-part strong name:
Now, to your page. First you need to import the assembly and register a tag prefix. Do so as such:
< %@ Assembly Name="CustomComponent, Version=18.104.22.168, Culture=neutral, PublicKeyToken=17135d9fcba0119f" %>
< %@ Register TagPrefix="MyPrefix" Assembly="CustomComponent, Version=22.214.171.124, Culture=neutral, PublicKeyToken=17135d9fcba0119f" Namespace="CustomComponent" %>
Remember what I wrote that the tagprefix-part of the tag is less important during development? Well, now it is importan. You may chose whatever value for TagPrefix in the register-tag you want, but whatever you choose will be the prefix for all your custom components.
Now, if you have done everything correctly you should not just be able to get your component to work but also get intellisense in SharePoint Designer:
Remember to add runat=”server” to your tag to make it work. Hit F12 to test your new component in your browser, et voilá, watch your Hello World! text displayed on your page.
I’ll come back later with more info on how to add customizations to your component so that you may send parameters into your class to modify the output.
Good luck, and let me know how it turns out.