WebTemplate training materials - Lab 3 - Creation of WebTemplate for WCM site

This post is lab 3 from series of training materials for WebTemplate creation and maintenance. Please check the following posts for details and other exercises. Notice that you can download full package with all required lab material from link available in introduction post. This package contains all supplementary materials and labs in word format.

This particular post will concentrate on following functionalities.

  • Creating WebTemplate for Event site
  • Adding custom page layout which is used in WebTemplate to our solution
  • Creating required features and associations to onet.xml files for the WebTemplate

Lab 03 – WebTemplates and Page Layouts

The project files for this lab are in the ‘C:\Student\Labs\03_WCM’folder

Lab Objective

Lab Overview: In this lab you will create actual WebTemplate and add custom page layout for it to be used automatically when site is created based on it.

Additional Resources

This lab includes the following additional resources:

Starter Files

C:\Student\Labs\03_WCM\StarterFiles

Files that can be used to help complete the labs.

Source Code

C:\Student\Labs\03_WCM\Solution

Completed lab source code for the status after this lab

Solution structure

C:\Student\Labs\Contoso.Intranet\

Solution structure started in previous exercise.

Getting Started

Notice that all code and xml elements which are meant to be copied are available as text in the Word documents. This means that if you need to copy any of those elements, it’s better to use Word document formats of these labs.

This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory.

The default working folder for this lab is C:\Student\Labs\03_WCM .

Please notice that this exercise is assuming that you have environment with url https://intranet.contoso.com in your usage. If you use some alternative url, you’ll have to update scripts and use correct entries in exercises to make exercise to work properly.

Lab Setup Instructions

In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection.

1. Start the Virtual Machine in Hyper-V.

2. Log on to the Virtual Machine as the local administrator with a user name of Contoso\Administrator and a password of pass@word1.

3. Open Windows Explorer and browse to the location C:\Student\Labs\Contoso.Intranet, in the folder double click Contoso.Intranet.sln to start the previously created solution structure.

  • This step assumes that you have already created lab 1 & 2 based on the lab guidance’s, so that we can continue building up the customization package.
  • Notice also that package contains full source code status after lab 2 in folder C:\StudentWebTemplate\Labs\02_UI\Solution\Contoso.Intranet - Lab 2 which you can copy as your starting point if you want to skip previous labs completely.

 

Exercise 1 – Creating Event Page Layout

In this exercise we’ll create page layout for the event content type, which was created earlier. This way content editors can easily create new events, which have nice editing experience for setting up metadata.

Task 1 – Adding page layout module

1. Expand the SPIs folder and Modules folders located in Contoso.Intranet project

2. Right click Modules and choose Add – New Item…

3. Choose Module and name it as EventPageLayout

clip_image002

4. Click Add

5. Select Sample.txt under the EventPageLayout module and delete it

6. Right click EventPageLayout and choose AddExisting Item…

7. Browse to folder c:\Student\Labs\03_WCM\StarterFiles and choose ContosoEventPage.aspx

8. Click Add

9. Double click ContosoEventPage.aspx in the solution explorer and review its content

· This file defines the layout for individual event. Event fields have been associated to the page layout already

10. Double click Elements.xml file and update the content as in following code snipped

image

clip_image003Properties for File element in module provisioning

We are defining properties for the file to be uploaded. These are not SPFile or SPPageLayout properties, rather column values for the file, which will be available in document library. In this case we define few additional properties (Page Layout and PublishingAssociatedContentType) so that page layout is properly available for pages created in the portal.

Notice also the Url attribute for the Module. This defines target of the file to be provisioned. Since we are provisioning page layout, we’ll need to set the target to _catalogs/masterpage.

11. Expand SPIs and ContentTypes folder in Content.Intranet project

12. Open Elements.xml file located under Event content type

13. Copy the ID of the content type to clip board – we’ll need to update this to page layout module

14. Move back to Elements.xml file located under the EventPageLayout module

15. Locate [ContentTypeId] string in the value of the PublishingAssociatedContentType property

16. Replace the tag with the just copied content type id of the event content type like in the following snipped - Since we’ll need to associate page layout to content type, we’ll need to ensure that the IDs will match. Notice that we’ll need to leave the hash and other chars in place.

  • Note. Don’t directly copy identifier as below, since value depends on your environment

image

17. Save changes

18. Expand Features node in the project structure and open up WebPublishingBinding feature in designer mode

19. Remove all other SPIs from this feature than the PublishingBinding, ifthere’sany other SPI’s

clip_image005

20. Open up SiteMainResources feature and ensure that all other SPIs except the PublishingBinding SPI is associated to it

clip_image007

21. Save changes

 

Task 2 – Testing page layout in the portal

1. Right click Contoso.Intranet project and choose Deploy

2. Ensure that deployment was successful from the output window

clip_image009

3. Open up Internet Explorer and move to address https://intranet.contoso.com · Depending on the master page currently defined on the portal, you might run into minor issues after deployment. If you’re unable to access the front page, perform following steps

4. Move to Site Settings from Site Actions menu

5. Click Master Pages and page layouts under the Galleries selection to ensure that Event page layout was successfully deployed – ContosoEventPage.aspx in the gallery

clip_image011

6. Move back to Site Settings

7. Click Page Layouts and site templates under the Look and Feel section

8. Under the New Page Default Settings, select Event Page layout to be the default page for new pages

clip_image013

9. Click OK

10. Select New Page from the Site Actions menu

clip_image015

11. Set name as MyExampleEvent - Note. If you’re currently using the custom Contoso master page, it has minor issues with the popup rendering due missing popup style definitions. Don’t mind those.

clip_image017

12. Click Create

13. Notice the Event related fields on the page layout, like Event Location and Event Date · Now we have successfully deployed also our page layout to site collection

clip_image019

 

Exercise 2 – Creating WebTemplate

In this exercise we’ll create new farm scoped web template, which will be used to create Event site for Contoso Intranet. We’ll use some previously created xml files to make the exercise easier. Web

Task 1 – Creating SPI for the Event WebTemplate

In this task we’ll create SPI for the web template and define the new site creation instruction, which we can use in following steps to create event sites.

1. Move to Visual Studio side

2. Expand SPIs folder and create new sub folder called WebTemplates

3. Right click WebTemplates folder and choose Add – New Item

4. Choose Empty Element and name it was EventWebTemplate

clip_image021

5. Right click EventWebTemplate SPI and choose add existing Item

clip_image023

6. Browse to c:\Student\Labs\03_WCM\StarterFiles and select onet.xml file

7. Click Add

8. Activate onet.xml file in Solution Explorer and review the Property window. Notice that currently Deployment Type is NoDeployment – Update the property as ElementFile

clip_image025

9. Double click onet.xml file and review its content · Notice that there’s already definition to use the Contoso master as chrome master (ChromeMasterUrl property) in one of the features and there’s also default page layout definition also in place (DefaultPageLayout property).

clip_image003[1]Site definitions vs. WebTemplate element usage

If you’re familiar with Site Definitions from the 2007 version, this should seem familiar as well. Key difference is between site definitions and web template is the flexibility of the web templates in sense of customization updates and technically web templates don’t support definition of modules in the onet.xml. We can however provision modules for the site using associated features. This is done in the following task.

Check more concerning differences and usage models from my previous blog post.

10. Open Elements.xml file under the EventWebTemplate

11. Update the content as in the following snipped

  • Notice that since our WebTemplate is publishing template, we will use out of the box publishing template as the base template for future upgradability purposes (helps to movement to o15)

image

12. We’ll need to still modify the provisioning model of the WebTemplate. Right the Features node in the Contoso.Intranet project and choose Add Feature

13. Rename just created feature as FarmEventWebTemplate · In this case we deploy our Web Template to be available farm wide. You can also deploy WebTemplates using site collection scoped feature.

14. Open up feature designer (if not open, double click just created feature) and set initial properties as follows

  • Title – Contoso.Intranet Farm Event Web Template
  • Description – Deploys new event web template to be available in farm
  • Scope - Farm

15. Associate EventWebTemplate to feature

clip_image027

16. Open up WebPublishingBinding feature and ensure that EventWebTemplate SPI is not associated to it or to SiteMainResources feature

clip_image029

17. Save changes

 

Task 2 – Creating default feature and welcome page for the web template

In this task we’ll create default feature for the Event web template, which is responsible of deploying the default.aspx page for the site.

1. Right click Features node and choose Add Feature

2. Rename feature as WebEventWebTemplateDefault

3. Set properties of the feature as following

  • Title – Contoso.Intranet Web Event Web Template Default resources
  • Description – Default provisioner for the Event web template
  • Scope – Web

clip_image031

4. Expand the SPIs and Modules folders

5. Right click Modules and choose AddNew Item

6. Select module SPI type and name it as EventWebTemplateDefaults

7. Delete Sample.txt under the EventWebTemplateDefaults module

8. Right click EventWebTemplateDefaults and choose AddExisting Item…

9. Browse to c:\Student\Labs\03_WCM\StarterFiles and choose default.aspx and event1.aspx

10. Click Add

clip_image032

11. Open Elements.xml file located under the EventWebTemplateDefaults and update the xml as in the following snipped

image

12. Open WebEventWebTemplateDefault feature, set Is Hidden to True and copy the Feature Id from the properties window to clip board

clip_image034

13. Ensure that EventWebTemplateDefaults is listed in the Items in the Feature section and add also PulishingBinding SPI to the feature. IMPORTANT – Ensure that binding SPI is above the EventWebTemplateDefaults like in below picture. You might have to do some re-associations in the designer to achieve this.

clip_image036

14. Open onet.xml file located under the EventWebTemplate SPI

15. Locate following string from the onet.xml file: <!-- Default page module reference -->

16. Place Feature reference just underneath the marker as in the following snipped. Note that feature ID in your case is different, since it’s randomly created during feature creation · This will ensure that feature is automatically activated when the web template is used for site creation

image

 

Task 3 – Add feature receiver to define initial settings for provisioned site

In this task we will stamp the site with custom property bag entry for traceability purposes using object model. You can then use this information in future to ensure that particular site has been created using specific WebTemplate.

Notice also that since we updated Web scoped feature to be hidden, you can use that as your versioning feature…. Those sites which has that feature enabled, are created using specific template and therefore you can version WebTemplate using this feature with feature upgrading definitions.

1. Right click WebEventWebTemplateDefault feature and choose Add feature receiver…

2. Remove all other methods, but replace FeatureActivated method as follows · Notice that we store the Name attribute value of the WebTemplate to property bag

image

3. Save changes

 

Task 4 – Deploy and test the structures

In this task we’ll create default feature for the Event web template, which is responsible of deploying the default.aspx page for the site.

1. Right click Contoso.Intranet project and choose properties

2. Move to SharePoint tab

3. Update Active Deployment Configuration as No Activation and uncheck also the Auto-retract after debugging to make future debugging experience little bit faster

clip_image038

4. Save all changes

5. Right click Contoso.Intranet and choose Deploy

6. Ensure that deployment was successful from the Output window

7. Move to internet explorer and to address https://intranet.contoso.com

8. Move to Site Settings page from the Site Actions menu

9. Move to Site Collection features under the Site Collection administration

10. Activate Contoso.Intranet Site Main Resources feature

11. Move back to Site Settings page

12. Click Page Layouts and site Templates under the Look and Feel

13. Add Events Site as one of the available site types

clip_image040

14. Click OK

15. Move back to front page of the site collection

16. Choose New Site from the Site Actions menu

17. Choose Events Site and define the properties as follows

  • Title - Events
  • Url - Events

clip_image042

18. Click Create - Creation of the site will take a while

19. Click Example Event from the left menu

20. Notice how we provisioned example template for event, with initial settings for Location and Title

clip_image044

21. Switch page to Edit mode

22. Notice how you can use specific controls to edit the event information

clip_image045

23. Save changes of the page

24. Choose New Page from Site Actions menu and ensure that default settings for the page layout were successfully applied so that our custom page layout is used by default


If you find any issues on the lab, please add comments below, so that we are able to fix them as fast as possible. You can also suggest any enhancements for the lab, but due other on-going projects, I can’t promise to have time to include them. Thanks for your comments and feedback advance.

- Vesku