WebTemplate training materials - Lab 1 - Creation of features and basic structures

This post is lab 1 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.

• WebTemplate training materials – Introduction to material
• WebTemplate training materials – Lab 1 - Creation of features and basic structures
• WebTemplate training materials – Lab 2 - Creation of custom navigation control and master pages
• WebTemplate training materials – Lab 3 - Creation of WebTemplate for WCM site
• WebTemplate training materials – Lab 4 - Upgrading existing sites with feature versioning

This particular post will concentrate on following functionalities.

• Creating features and feature receivers – Introduction to VS2010 usage 
• Debugging feature receivers - Introduction to VS2010 usage
• Starting creation of VS2010 project structures for more comprehensive customizations coming following labs
• Creating site columns and content types for the upcoming WebTemplate created in following labs

---

Lab 01 – Getting started with Visual Studio 2010 and feature Framework - Creating required features for WebTemplate

The project files for this lab are in the ‘C:\Student\Labs\01_FeaturesAndVS2010

Lab Objective

Lab Overview: In this lab you will begin your work with Visual Studio 2010 and become familiar with the different options available and start creating the solution structure for upcoming WebTemplate deployment.

Additional Resources

This lab includes the following additional resources:

Starter Files	C:\Student\Labs\01_FeaturesAndVS2010\StarterFiles	Files that can be used to help complete the labs.
Source Code	C:\Student\Labs\01_FeaturesAndVS2010\Solution	Completed lab source code in C# for Lab01

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\01_FeaturesAndVS2010.

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\01_FeaturesAndVS2010, in the folder double click SetupLab01.bat.

4. Verify the site created successfully message, and then press a key to close the prompt.The setup script launches a PowerShell script that creates a sample SharePoint site at the location https://intranet.contoso.com that you will use in the next exercises. If you use some alternative URL, you can update the script based on your own environment.

Exercise 1 – Creating Visual Studio Solution for project

In this exercise you will create initial structure for the upcoming solution using Visual Studio 2010.

Task 1 – Creating initial structure

1. Click Start | All Programs | Microsoft Visual Studio 2010. In the group of programs, right-click Microsoft Visual Studio 2010 and click Run as Administrator. This enables Visual Studio debugger to work correctly when attaching to the SharePoint worker process - In default SP2010 demo environment SharePoint is running using Farm Administrator account, so this would not be actually required, but this depends on the environment which you use for the lab exercises

2. On the Start page, in the Project section, click New Project.

3. In the Target Framework dropdown at the top of the page ensure .NET Framework 3.5 is selected.

4. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010, and then click Empty SharePoint Project. - We use Empty SharePoint project, so that we don’t have any additional examples created to Visual Studio project structure. You can still add any kind of SharePoint items to this project, even though we initially started that as “empty” project.

5. In the Name textbox, type Contoso.Intranet.

6. In the Location textbox, type C:\Student\Labs\ and then click OK.

7. In the SharePoint Customization Wizard, in the What local site do you want to use for debugging? textbox, type https://intranet.contoso.com/ · Notice that url is dependent on your environment.

8. Select the Deploy as a farm solution option.

9. Click Finish.

Task 2 – Reviewing the project nodes

In this task you will examine the four nodes created in a SharePoint 2010 project. The nodes Properties and References are standard on Visual Studio projects, whereas Features and Package are unique to projects created with Visual Studio 2010 SharePoint Tools.

1. Right-click the Features node and choose Add Feature. A feature with the name Feature1 is added. Right-click on this node and click Rename. Rename this feature to SiteMainResources

2. In Solution Explorer, right-click SiteMainResources and click View Designer.

3. In the Title textbox, type Contoso.Intranet Site Main Resources.

Good practice – prefixes for features

We use Site prefix for the feature node in the solution to indicate its scope easily without opening up the feature. Name of the feature node also defines the folder name of the feature in the 14 root. We use also Site in the title, so that we can see the scope of the feature easily from the packaging explorer, which we use later in this exercise

4. In the Description textbox, type Main resources for Contoso.Intranet.

5. Click the Scope dropdown list and then click Site. · Note: Site columns and content type deployment requires a feature which activates at site collection scope in order to properly deploy Web Part description files.

6. Save changes.

Task 3 – Adding images to a SharePoint 2010 Project

Visual Studio tries to ensure best practice by adding images to a project specific sub-folder in the images containing folder. This avoids naming conflicts with images that Microsoft deploys in the Images location.

1. In Solution Explorer, right click Contoso.Intranet, click Add and then click SharePoint “Images” Mapped Folder.

2. In Solution Explorer, in the Images node, right-click Contoso.Intranet folder and click Add Existing Item… .

3. Browse to the folder C:\Student\Labs\01_FeaturesAndVS2010\StarterFiles and, holding the [CTRL] key, select the files named FeatureIcon.gif, SiteIcon.gif and WebPartIcon.gif.

4. Click Add.

5. In Solution Explorer, expand Features, double click SiteMainResources feature - This opens up the properties sheet for the particular feature.

6. In the Properties sheet for the feature, in the Image URL property, type Contoso.Intranet\FeatureIcon.gif · This is good practice to differentiate your features from the out of the box features in UI

7. Click Save.

Exercise 2 – Adding a Feature Event Receiver

In this exercise you will add a feature receiver. This will automatically execute during feature activation and feature deactivation. In this exercise you will:

• Obtain the SPSite reference which points to the site collection in which the feature is being activated.
• Obtain a SPWeb reference which points to the top-level site.
• Query the top-level site's Title property and store the value as a name/value pair inside the SPWeb.Properties collection.
• Modify the site's Title property with a creative text value of "Contoso Intranet"
• Modify the site's SiteLogoUrl property to point to SiteIcon.gif inside the Images folder.

Notice that this is just preliminary exercise before we start actually creating structures for required WebTemplate structures.

Task 1 – Creating event receiver

In this task you will edit the project code to make use of an event receiver.

1. In Solution Explorer, expand Features, right click Main and click Add Event Receiver.

2. SiteMainResources.EventReceiver.cs opens in the editing window. Note the code stubs and the unique Guid for the feature. Guid is used by Visual Studio to associate proper feature receiver to correct feature.xml file.

3. Uncomment the method named FeatureActivated and FeatureDeactivating. Then remove all the extraneous comments. Your code should look as follows (Note. Don’t copy this code, uncomment the existing so that Guid attribute is correct):

4. Add following code between the braces {} in the FeatureActivated method · Notice that we use prefix Contoso.Intranet when we store our own custom properties to property bags to avoid overlapping with any out of the box properties. This is really good practice to follow up in your real life projects as well.

5. Add following code between the braces {} in the FeatureDeactivating method - In this code we reset the site back to the status it was before the code was executed. This is good practice to follow up in your own customizations as well.

6. On the File menu, click Save all.

7. In Solution Explorer, right-click on the Contoso.Intranet and click Build.

7. At the bottom of the Visual Studio Window, click Output to see the results of the build. Verify the code builds correctly. Leave the project open, you will deploy and test the code in the next Exercise · Note. If Output is not visible, you can get it opened by selecting Output from View menu

Exercise 3 – Deploying and Debugging SharePoint Projects

In this exercise you will deploy your solution and then activate it on the SharePoint site collection. Finally you will debug the solution.

Task 1 – Review deployment options and Output window results

1. In the Solution Explorer window, right-click Contoso.Intranet and click Properties.

2. Click the SharePoint tab.

3. In the Active Deployment Configuration dropdown list, click No Activation.

4. In the Edit Configurations list box, click No Activation and then click View - Notice that you can control deployment and retraction settings from here. Review the different options available.

5. Click OK to close the dialog.

6. Save changes

7. Ensure the output window is visible at the bottom of the screen, then in Solution Explorer window, right click Contoso.Intranet and choose Deploy · Review the steps that are specified in the Output window.

8. Leave the Visual Studio project open, you will return to it in a later task.

Task 2 – Reviewing the feature in the SharePoint site collection

The solution package for the Contoso.Intranet project has been deployed on the local SharePoint. In this task you will test the work.

1. Open Internet Explorer and browse to https://intranet.contoso.com

2. Click the Site Actions menu, and then click Site Settings.

3. In the Site Collection Administration section, click Site Collection Features. In the list of Features, review the Contoso.Intranet Site Main resources feature and its custom icon.

4. To the right of the Contoso.Intranet Site Main Resources feature, click Activate.

5. In the title bar to the top left of the features, click Contoso Intranet · Review the new site Icon – since we are using publishing features, title of the site is not visible from here.

6. Click the Site Actions menu, and then click Site Settings · Notice that the site title set in the feature receiver is visible here.

7. In the Site Collection Administration section, click Site Collection Features.

8. To the right of the Contoso.Intranet Site Main Resources feature, click Deactivate.

9. On the warning page click Deactivate this feature.

10. Refresh page by clicking [F5] · The site icon and title have returned to the default.

Task 3 – Debugging the project

In this task you will use Visual Studio 2010 to debug your project. You will create breakpoints and then step through the code.

1. Return to Visual Studio 2010.

2. In Solution Explorer, expand the Features branch.

3. Right-click SiteMainResources.EventReceiver.cs and click View Code.

4. Locate the cursor in the line SPWeb site = siteCol.RootWeb; on the toolbar click Debug, and then click Toggle Breakpoint (or F9 as short cut).

5. On the Visual Studio menu, click Debug and then click Start Debugging. The solution builds and a new instance of Internet Explorer is launched.

6. In the Debugging Not Enabled message box, click OK.· Note. This happens only for the first time particular web application is used for debugging. · Note. Starting the debugging process could take a while, so wait patiently

7. Click the Site Actions menu, and then click Site Settings.

8. In the Site Collection Administration section, click Site Collection Features.

9. To the right of the Contoso.Intranet Site Main Resources feature, click Activate.· Visual Studio Editor opens and the code stops at the breakpoint.

10. Press [F11] to step through the code.

11. Return to Visual Studio on the menu click Debug, and then click Stop Debugging.

12. Locate the cursor in the breakpoint line and click [F9] to Toggle the breakpoint off.

Exercise 4: Creating and deploying content types for the solution

In the remaining exercises you will add few new SharePoint Items to the project using empty and content type templates. We are starting to building up the data structure model for our upcoming Contoso.Intranet solution, which will be based on WebTemplate techniques.

Task 1 – Creating site columns

In this task you will add a Web Part to the project. You will edit the XML files to specify a different category for the part.

1. In the Solution Explorer window, right click Contoso.Intranet, click Add, and then click New Folder.

2. Rename folder as SPIs - SPIs is just shortening from “SharePoint project item”. We use this folder to group our SarePoint specific structures to sub folders so that solution structure remains understandable and also others working in project can easily understand what’s included in it.

3. Add also new sub folder to this folder, named as SiteColumns

4. Right click SiteColumns, click Add, and then click New Item.

5. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010 and then click Empty Element.

Empty template

Since there’s no out of the box template for site columns, we’ll be using Empty Element for defining our required fields. You can use this approach for any SharePoint projects items, which don’t have dedicated template available.

6. In the Name textbox, type InitialFields.

7. Click Add. The InitialFields node is added to Solution explorer with elements.xml file.

8. Double click the Elements.xml file located under the Initial fields

9. Open up fields.txt located in the c:\student\labs\01_featuresAndVS2010\StarterFiles and copy the content between the Elements elements in the Elements.xml file as follows:

10. Review the xml content – we create the required fields for the upcoming event functionality which has specific metadata used in page layouts. In this case we add three different fields related to upcoming event functionality.

Task 2 – Creating publishing content types

1. Right click the SPIs folder and create new ContentTypes sub folder

2. Right click the ContentTypes folder and choose Add – New Item

3. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010 and then choose Content Type

4. Name content type as Page· This will be our Contoso specific root page for the publishing sites.

5. Click Add

6. Choose out of the box Welcome Page as the base content type for this content type

7. Update the Group attribute of the content type as Contoso Content Types

8. We don’t need to associate any additional fields to this content type in this stage, so the definition should look as follows. Notice how the name is project specific to follow naming guidance

Content type inheritance

This content type is created as the root content type for the custom publishing content types in this project. This way we can easily extend any custom content types, by manipulating this definition in future phases of the Intranet

9. Right click the ContentTypes folder and choose Add – New Item

10. Choose Content Type and name the content type as Event

11. Click Add

12. Choose Contoso.Intranet - Page as the base content type

13. Update the Group attribute as Contoso Content Types

14. Open up fieldrefs.txt located in the c:\student\labs\01_featuresAndVS2010\StarterFiles and copy the content between the FieldRefs elements in the Elements.xml file as follows: · Important – Don’t copy the snipped directly from below, since the content type GUID depends on the environment. Replace only the field references.

Task 3 – Creating document content types

1. Right click the ContentTypes folder and choose Add – New Item

2. Name to be added content type as Contract

3. Click Add

4. Choose content type to be based on out of the box Document content type

5. Update the Group attribute as Contoso Content Types

6. Open up statusref.txt located in the c:\student\labs\01_featuresAndVS2010\StarterFiles and copy the content between the FieldRefs elements in the Elements.xml file as follows: · Notice that we are using out of the box site column, so we only need to reference it here

This content type is only for feature upgrade demonstrations, so we don’t include any actual custom word template for it in this exercise

Task 4 – Creating content association for publishing pages

In this following task we create necessary content type binding element, which will be responsible of adding publishing content types to be available in the pages library. Unless we do this, content editors cannot create new pages with the soon to be created page layout.

1. Right click Features node in the Solution Explorer and choose Add Feature

2. Rename the newly added feature as WebPublishingBinding · This is web scoped feature, which is used for binding content type to site. In this series we actually create this just for verification purposes, so we don’t actually use this web scoped feature at all when WebTemplate has been fully created.

3. Update title and description as follows

• Title – Contoso.Intranet Web Publishing Binding
• Description – Content type binding feature

4. Ensure that the Scope is set as Web

5. Right click the SPIs folder and choose Add – New Folder

6. Name folder as ContentTypeBindings

7. Right click the ContenTypeBindings folder and choose Add – New Item

8. Choose Empty Element and name that as PublishingBinding

9. Open up Bindings.txt located in the c:\student\labs\01_featuresAndVS2010\StarterFiles and update the content as follows: · Notice that you’ll need to update [ContentTypeId] places with the content type ids in your environment. These are the IDs of the content types, which we just created in previous SPIs, which we added to the solution.

10. Your solution should look somewhat as in following picture

Task 5 – Verifying outcome

In this task we verify the configure setup by reviewing the packaged content and how the structures are generated to site collection after deployment

1. Choose Package Explorer from the View - Other Windows menu

2. Ensure that the elements are in proper features – as all site columns and content types in site collection scoped feature and binding in web scoped feature - Notice that the Feature Titles are visible here, so it’s good practice to name them properly - Notice also that you’ll need to have fields before content types listed in feature, since other of the project items in the features really matters.

3. Right click the Contoso.Intranet project and choose Properties

4. Move to SharePoint tab and modify activation to be Default

5. Save all changes – for example by selecting Save All from File menu

6. Right click Contoso.Intranet project and choose Deploy

7. Open up Internet Explorer and move to url https://intranet.contoso.com

8. Choose Site Settings from the Site Actions

9. Click Site Content Types under the Galleries

10. Ensure that you can see the just created three content types in the list · Notice also that site icon has been updated automatically by site collection scoped feature activation

---

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

Comments

• Anonymous
  September 09, 2013
  Hello Great Post I have s spanish sytem and in the file "Elements.xml" of  "PublishingBinding" SPI, I can't use          ListUrl="pages" I have to use :          ListUrl="$Resources:osrvcore,List_Pages_UrlName" Good Bye

• Anonymous
  September 09, 2013
  Thanks Miguel, that's indeed the right model to support multilingual deployments, so thanks for sharing. .vesku