Create a Page Layout in Visual Studio 2010

This was a page layout I had to make for a client, with a lot of different things. So hang on, if you want to make a extended page layout.

I started with creating a module for my page layout with 2 elements in it: Elements.xml and my .aspx Page Layout. (Just delete that Sample.txt!)
The best thing to do when you’re creating a Page Layout is cheating by making a Page Layout first in Microsoft SharePoint Designer 2010 and than copying the code into your own file.

STEP 1: Attach content type

I’m using my own content type called GentInfo Infofiche. This content type contains probably every type of field that exists in SharePoint.

For this part I have to refer to another blog that helped me a lot with the property PublishingAssociatedContentType and that is the blog of Chris O'Brien.
It is important that the value for this property is in the following form “;#Content type name;#Content type ID;#”.

STEP 2: Add Content type fields to page

Open SharePoint Designer and open your site. Make a New Page Layout with your existing Content Type. Just drag your Content Field onto the page layout.
   

Now, select all and copy it into your .aspx file in the module. It Should look like something like this:

STEP 3: SharePointWebControls:SPSecurityTrimmedControl

I don’t want to show to much sensitive information to the readers-only, yet some users have to see this information without going to another view of page. So I played around with the SPSecurityTrimmedControl (I didn’t find it in the toolbox, only when I typed it I found it :-s).

Write this around the information you want to protect. You can find more information about the Permissions on the blog oriol fernàndez moreno.

STEP 4: PublishingWebControls:EditModePanel

I want to hide certain fields when I’m editing my page but still see it display mode or visa versa.
I found the EditModePanel in the toolbox.

STEP 5: Add CSS and JavaScript-file

In Visual Studio 2010, I added a SharePoint “Layout” Mapped Folder to my solution, where I added my CSS and JavaScript-file.
In my Page Layout, I mention them as follows:

STEP 6: Expander

Now I’ll add a little piece of JavaScript to my Page Layout to expand or minimize a region. Normally I would do this with Ajax but SharePoint still works on a .NET platform 3.5, which doesn’t support Ajax.

Make sure that the div you want hide or show has an Id. You have to give this as one of the parameters in the onClick of the image.

STEP 7: Add the page layout into a feature

Finally, add your module into your feature.
 

STEP 8: Set your custom page layout as default Page Layout

I also want to set my Page Layout as default. This is possible by adding a event receiver and adding following code in the FeatureActivated:

IMPORTANT: When you make a change in your page layout and re-deploy

If you make changes to your Page Layout afterwards these changes will not be transported to the pages you’ve already made. Make sure the new page layout is approved!