Exercise 4: Creating, Deploying and Testing Web Parts

Given the fact that your project is named ContosoWebParts, it probably makes sense to add a few Web Parts. In the remaining exercises you will add two new SharePoint Items (SPIs) to the project using the Web Part template. Keep in mind that Web Part template is just one of the many different SharePoint Item (SPI) types included with the Visual Studio 2010 SharePoint Tools.

1. Add a new Web Part to the ContosoWebParts project named HelloPart.

   1. Right-click on the ContoWebParts project in Solution Explorer and select Add » New Item.

   Select the SharePoint » 2010 » Web Part project item template and give it a name of HelloPart. Click the Add button.

   Figure 1

   Create a new web part. C# Shown, VB.NET similar for adding a Web Part

2. Inspect the SPI node for the Web Part named HelloPart. You should be able to verify that it contains three SPI files named Elements.xml, HelloPart.cs and HelloPart.webpart.

   Figure 2

   The Solution Explorer

3. Open the file named HelloPart.webpart and make the following modifications.
   1. Find the element for the Title property and change its value to The "Hello" Web Part.
   2. Find the element for the Description property and change its value to something meaningful.

      XML

      <?xml version="1.0" encoding="utf-8"?> <webParts> <webPart xmlns="https://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="ContosoWebParts.HelloPart.HelloPart, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage> $Resources:core,ImportErrorMessage; </importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string"> The "Hello" Web Part </property> <property name="Description" type="string"> A most compelling Web Part </property> </properties> </data> </webPart> </webParts>
4. In addition to the property values for Title and Description, add three more additional Web Part properties to HelloPart.webpart using the name/value pairs the following table.
   1. ChromeType: TitleAndBorder
   2. CatalogIconImageUrl: _layouts/images/ContosoWebParts/WebPartIcon.gif
   3. TitleIconImageUrl: _layouts/images/ContosoWebParts/WebPartIcon.gif

      XML

      <?xml version="1.0" encoding="utf-8"?> <webParts> <webPart xmlns="https://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="ContosoWebParts.HelloPart.HelloPart, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage> $Resources:core,ImportErrorMessage; </importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string"> The "Hello" Web Part </property> <property name="Description" type="string"> A most compelling Web Part. </property> <property name="ChromeType" type="chrometype"> TitleAndBorder </property> <property name="CatalogIconImageUrl" type="string"> _layouts/images/ContosoWebParts/WebPartIcon.gif </property> <property name="TitleIconImageUrl" type="string"> _layouts/images/ContosoWebParts/WebPartIcon.gif </property> </properties> </data> </webPart> </webParts>
5. Open the Web Part’s Elements.xml file and make the following modifications:
   1. Modify the URL attribute of File element to change the .webpart file name to ensure that it is unique. Do this by prepending the text value of "ContosoWebParts_" to the beginning of the URL property value.

      XML

      <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/" > <Module Name="HelloPart" List="113" Url="_catalogs/wp"> <File Path="HelloPart\HelloPart.webpart" Url="ContosoWebParts_HelloPart.webpart" Type="GhostableInLibrary"> <Property Name="Group" Value="Custom" /> </File> </Module> </Elements>
   2. Change the value for the Group property to "Contoso Web Parts".

      XML

      <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/" > <Module Name="HelloPart" List="113" Url="_catalogs/wp"> <File Path="HelloPart\HelloPart.webpart" Url="ContosoWebPart_HelloPart.webpart" Type="GhostableInLibrary"> <Property Name="Group" Value="Contoso Web Parts" /> </File> </Module> </Elements>
6. Open the C#/VB.NET source file named HelloPart.cs/vb. Modify the code with this very simple starting point for a Web Part class implementation.

   C#

   namespace ContosoWebParts.HelloPart { public class HelloPart : WebPart { protected Label outputLabel; protected override void CreateChildControls() { outputLabel = new Label(); outputLabel.Text = "Hello Web Part"; Controls.Add(outputLabel); } } }

   VB.NET

   <ToolboxItemAttribute(false)> _ Public Class HelloPart Inherits WebPart Protected outputLabel As Label Protected Overrides Sub CreateChildControls() outputLabel = new Label() outputLabel.Text = "Hello Web Part" Controls.Add(outputLabel) End Sub End Class
7. Build the ContosoWebParts project and make sure there are no compilation errors. If there are errors when running the Build command, find and fix these errors until you can run the Build command without experiencing any errors.
8. Run the Deploy command which will retract and deploy the solution package for the ContosoWebParts project.
9. In browser, navigate to the test site at https://intranet.contoso.com/sites/lab02 and follow these steps to go through the activation process.
   1. Click Site Actions » Site Settings to navigate to the Site Settings page.
   2. Inside the Site Collection Administration section of the Site Settings page, click on the Site collection features link to navigate to the Site Collection Administration > Features page.
   3. Locate the Custom Web Parts and activate it. If it was already active, then deactivate first and then activate it again.
      Note:

      The key point here is that feature activation is what provisions the .webpart file into the Web Part Gallery which will allow you to test your work.

10. Now it is time to add a test instance of the Web Part you just created to a Web Part Page. Navigate to the home page default.aspx (i.e. Click on the Home tab on the left side of the screen). Click on the Site Actions button and choose the Edit Page menu item. Click on the Add a Web Part area in the Left web part zone, so that an additional Page Tools ribbon tab becomes visible.

    Figure 3

    Add a new web part

11. Click on Insert in the Page Tools area of the screen and note that you could also use this option to insert a Web Part, Text area, Image, or Existing List. Now click on the Page tab (to the right of the Page Tools area) to re-set the screen the way it was.

    Figure 4

    The Insert tab

12. At this point you should see the new SharePoint 2010 UI for adding Web Parts to a page. You should be able to see standard Web Part categories such as Lists and Libraries, Content Rollup, and Forms. You should also be able to see a new custom category named Contoso Web Parts which you created when you edited the Group property value inside the Elements.xml file. When you select the Contoso Web Parts category in the left-hand section, you should be able to see your Web Part in the right-hand section with a title of The "Hello" Web Part that you added to HelloPart.webpart. Once you have selected the The "Hello" Web Part, make sure the drop-down box on the far right bottom (shown below) has the Left Web Part zone selected, then click the Add button to add the Web Part instance to the page.

    Figure 5

    Insert the "Hello" Web Part

13. At this point, you have gone through all the required steps to create, deploy and test a Web Part. The test instance of your Web Part should look like the following screenshot.

    Figure 6

    The "Hello" Web part added