Mariusz, Gorzoch tech Blog

Custom publishing page layout

leave a comment »

Some time ago I was asked by the business to create custom “Article solution” and during the process of creating it I’ve created this simple tutorial how to do it. If you are interested then have look at it. The steps provided here are just to give you a fast snapshot what was done in particular step and for what you should pay your attention. If you want to dive into this solution, then I encounter you to download it thru the link provided on the end of this page.

so, let’ start:

1. Create empty class project in Visual Studio (I’m using version 2008) and reflect structure of the folders as shown on the picture bellow (I found good practice to fallow this structure as it make everything more clear and easy understand when it comes to deployment)

2. Now we will go create definition of Content type which will be used as a base to the custom publishing pages we will create. In addition to pure CT definition we will also add event receiver class, which will be fired-up on the “new item adding event”

Important things to note here are:

– ContentType ID need to be build on special pattern as this content type need to based on the “Page” CT. As this is so, ID of this content type need to start with “0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39”. Our ID was build by adding to this ID, “00” + our private ID (generated one thru tools->Create GUID) “C1BE2D721C524e22923F09AF6C884540”

– In case you need to reference some predefined Microsoft fields, then go to : http://msdn.microsoft.com/en-us/library/ee413858.aspx and take field id from there (this is quite good reference for predefined fields)

In addition to creation this definition I’ve also added “Article02CTEventReceiver” class. For now it is empty, but I prefer to add it in case I need it later (so I don’t have to mess with XML). Here is the content of the pure definition of “Event Receiver” class:

3. If we defined CT definition for the page, then now we need to create layout which should use this CT. To do this you need to create two files “aspx” and “cs” (code behind) one. Of course creation of code behind file is not required as this is only required in case you need to do some behind stuff. I’m trying to do this all the time, as it easer for me later on to just put some code in case I needed. Here you have “aspx” page:

going from the top of this file, we are doing: (a) registering code behind file (so we can do some stuff with this page in code, (b) registering all controls we could possibly use, (c) we are registering our custom control (this is an example how you can implement your own custom control and bind it to field defined in CT), (d) creating the actual page layout.

On the code behind file you can not find to much, as this is just pure definition:

of course you can place what ever you want as this is normal ASPX page.

4. Now we adding web part artifact, which will let us to place a button on the main page, which will allow user to create new page based on our layout. For that we need to create to additional files “Article02ButtonWebPart.webpart” (it will contain definition of web part) and second one “Article02ButtonWebPart.cs” (it will contain code to render our web part and do logic required to create page). Web part definition file will look like this:

and code file looks like this :

(entire code for that you will find on the end of this post)

What can be tricky at this point is the way how we create new page based on our CT definition. This is done by creating new page layout and providing SPContentTypeID object which is build with use of the ID of created by us Content Type.

please notice how we retrieving page layout. This need to be done in this way, as our CT ID in particular list instance is different then the one we give to this content type. This comes from the way how Microsoft implement attaching of CT to lists. When you are adding CT to list, then it is working in the way, that SharePoint is doing copy of you CT in the background (with ID equal to your CT ID + Guid.New() on the end). This way they keep reference to the original CT definition and maintain copy of it inside list. So in case you do some changes around CT to this list, this will not brake global definition of it. Of course this comes with the cost, but this post is not about that (you can find plenty info on the net around that)

let’s move forward…

5. Implementing custom bound control. Create new file called “FielUploadControl”. this file should looks like that:

What is important to know here : (a) This class need to inherit BaseFiledControl, (b), if you need to have custom display for this field (and want to), you need to overwrite method “RenderFieldForDisplay” and “DefaultTemplateName”. (c) DefaultTemplateName need to return your class name. For more details, have look here : http://msdn.microsoft.com/en-us/library/aa981226.aspx <- this is a good reference how to build your own bound controls.

Ok, we are almost on the end. Now we need to pack this entire stuff… so let start with

6. Elements.xml

as you can see we are referencing here our “ASPX” page (and setting associated with the page Content Type ID) and “Web part” component.

7. Feature.xml

Please remember to change ID, as this is the feature id.

this file let us pack everything in one feature, so when user will active this feature all those artifacts will be available for him. This is really cool thing around SharePoint and I encounter everyone to use it as much as possible.

8. Packing everything – manifest.xml, ddf and makecab

We are almost on the end. Now what we need is to pack this entire stuff into one container (wsp file) and send it to IT operation to be deployed on our farm. To do so, please add two additional files to our solution:

Open “Manifest.xml” file and place inside it this content:

here we are referencing artifacts we created before and in addition we asking SharePoint to add “SafeControl” section to web.config (this section is required to let our web part to work)

Now, please open “makewsp.ddf” file and place inside this content:

this is the list of files with “makecab” should pack into cab file.

If you do so, then we are done!!!, fire makecab with “/f” parameter, provide name for “makewsp.ddf” file and enjoy your package (here is exact command to start when you are located at project folder : makecab /F Deployment/makewsp.ddf /D CabinetNameTemplate=Article02CT.wsp /D DiskDirectory1=wsp) . I hope that this shows you how easy it is to create your custom “article solution”, pack it into wsp and send for the business to start using. In addition, as you can see you can quite easy extend the layout thru building your own bound controls.

In case of questions, problems – please post the question here or email me directly.

Here is a link to entire Visual Studio 2008 solution : ArticleSolution02%5E_20091112.zip


Written by Mariusz Gorzoch

12 November 2009 at 15:06

Posted in Bez kategorii

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: