Walkthrough: Extend Server Explorer to display web parts

Applies to: Visual Studio Visual Studio for Mac

Note

This article applies to Visual Studio 2017. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

In Visual Studio, you can use the SharePoint Connections node of Server Explorer to view components on SharePoint sites. However, Server Explorer doesn't display some components by default. In this walkthrough, you'll extend Server Explorer so that it displays the Web Part gallery on each connected SharePoint site.

This walkthrough demonstrates the following tasks:

• Creating a Visual Studio extension that extends Server Explorer in the following ways:

  • The extension adds a Web Part Gallery node under each SharePoint site node in Server Explorer. This new node contains child nodes that represent each Web Part in the Web Part gallery on the site.

  • The extension defines a new type of node that represents a Web Part instance. This new node type is the basis for the child nodes under the new Web Part Gallery node. The new Web Part node type displays information in the Properties window about the Web Part that it represents. The node type also includes a custom shortcut menu item that you can use as a starting point for performing other tasks that relate to the Web Part.

• Create two custom SharePoint commands that the extension assembly calls. SharePoint commands are methods that can be called by extension assemblies to use APIs in the server object model for SharePoint. In this walkthrough, you create commands that retrieve Web Part information from the local SharePoint site on the development computer. For more information, see Call into the SharePoint object models.

• Building a Visual Studio Extension (VSIX) package to deploy the extension.

• Debugging and testing the extension.

Note

For an alternate version of this walkthrough that uses the client object model for SharePoint instead of its server object model, see Walkthrough: Call into the SharePoint client object model in a Server Explorer extension.

Prerequisites

You need the following components on the development computer to complete this walkthrough:

• Supported editions of Windows, SharePoint and Visual Studio.

• The Visual Studio SDK. This walkthrough uses the VSIX Project template in the SDK to create a VSIX package to deploy the project item. For more information, see Extend the SharePoint tools in Visual Studio.

  Knowledge of the following concepts is helpful, but not required, to complete the walkthrough:

• Using the server object model for SharePoint. For more information, see Using the SharePoint Foundation Server-Side Object Model.

• Web Parts in SharePoint solutions. For more information, see Web Parts Overview.

Create the projects

To complete this walkthrough, you must create three projects:

• A VSIX project to create the VSIX package to deploy the extension.

• A class library project that implements the extension. This project must target the .NET Framework 4.5.

• A class library project that defines the custom SharePoint commands. This project must target the.NET Framework 3.5.

  Start the walkthrough by creating the projects.

To create the VSIX project

1. Start Visual Studio.

2. On the menu bar, choose File > New > Project.

3. In the New Project dialog box, expand the Visual C# or Visual Basic nodes, and then choose the Extensibility node.

   Note

   The Extensibility node is available only if you install the Visual Studio SDK. For more information, see the prerequisites section earlier in this topic.

4. At the top of the dialog box, choose .NET Framework 4.5 in the list of versions of the .NET Framework.

5. Choose the VSIX Project template, name the project WebPartNode, and then choose the OK button.

   Visual Studio adds the WebPartNode project to Solution Explorer.

To create the extension project

1. In Solution Explorer, open the shortcut menu for the solution node, choose Add, and then choose New Project.

2. In the New Project dialog box, expand the Visual C# node or Visual Basic node, and then the choose Windows node.

3. At the top of the dialog box, choose .NET Framework 4.5 in the list of versions of the .NET Framework.

4. In the list of project templates, choose Class Library, name the project WebPartNodeExtension, and then choose the OK button.

   Visual Studio adds the WebPartNodeExtension project to the solution and opens the default Class1 code file.

5. Delete the Class1 code file from the project.

To create the SharePoint commands project

1. In Solution Explorer, open the shortcut menu for the solution node, choose Add, and then choose New Project.

2. In the New Project dialog box, expand the Visual C# node or Visual Basic node, and then choose the Windows node.

3. At the top of the dialog box, choose .NET Framework 3.5 in the list of versions of the .NET Framework.

4. In the list of project templates, choose Class Library, name the project WebPartCommands, and then choose the OK button.

   Visual Studio adds the WebPartCommands project to the solution and opens the default Class1 code file.

5. Delete the Class1 code file from the project.

Configure the projects

Before you write code to create the extension, you must add code files and assembly references, and configure the project settings.

To configure the WebPartNodeExtension project

1. In the WebPartNodeExtension project, add four code files that have the following names:

   • SiteNodeExtension

   • WebPartNodeTypeProvider

   • WebPartNodeInfo

   • WebPartCommandIds

2. Open the shortcut menu for the WebPartNodeExtension project, and then choose Add Reference.

3. In the Reference Manager - WebPartNodeExtension dialog box, choose the Framework tab, and then select the check box for each of the following assemblies:

   • System.ComponentModel.Composition

   • System.Windows.Forms

4. Choose the Extensions tab, select the check box for the Microsoft.VisualStudio.SharePoint assembly, and then choose the OK button.

5. In Solution Explorer, open the shortcut menu for the WebPartNodeExtension project node, and then choose Properties.

   The Project Designer opens.

6. Choose the Application tab.

7. In the Default namespace box (C#) or Root namespace box (Visual Basic), enter ServerExplorer.SharePointConnections.WebPartNode.

To configure the webpartcommands project

1. In the WebPartCommands project, add a code file that's named WebPartCommands.

2. In Solution Explorer, open the shortcut menu for the WebPartCommands project node, choose Add, and then choose Existing Item.

3. In the Add Existing Item dialog box, browse to the folder that contains the code files for the WebPartNodeExtension project, and then choose the WebPartNodeInfo and WebPartCommandIds code files.

4. Choose the arrow next to the Add button, and then choose Add As Link in the menu that appears.

   Visual Studio adds the code files to the WebPartCommands project as links. As a result, the code files are located in the WebPartNodeExtension project, but the code in the files are also compiled in the WebPartCommands project.

5. Open the shortcut menu for the WebPartCommands project again, and choose Add Reference.

6. In the Reference Manager - WebPartCommands dialog box, choose the Extensions tab, select the check box for each of the following assemblies, and then choose the OK button:

   • Microsoft.SharePoint

   • Microsoft.VisualStudio.SharePoint.Commands

7. In Solution Explorer, open the shortcut menu for the WebPartCommands project again, and then choose Properties.

   The Project Designer opens.

8. Choose the Application tab.

9. In the Default namespace box (C#) or Root namespace box (Visual Basic), enter ServerExplorer.SharePointConnections.WebPartNode.

Create icons for the new nodes

Create two icons for the Server Explorer extension: an icon for the new Web Part Gallery node, and another icon for each child Web Part node under the Web Part Gallery node. Later in this walkthrough, you will write code that associates these icons with the nodes.

To create icons for the nodes

1. In Solution Explorer, open the shortcut menu for the WebPartNodeExtension project, and then choose Properties.

2. The Project Designer opens.

3. Choose the Resources tab, and then choose the This project does not contain a default resources file. Click here to create one link.

   Visual Studio creates a resource file and opens it in the designer.

4. At the top of the designer, choose the arrow next to the Add Resource menu command, and then choose Add New Icon in the menu that appears.

5. In the Add New Resource dialog box, name the new icon WebPartsNode, and then choose the Add button.

   The new icon opens in the Image Editor.

6. Edit the 16x16 version of the icon so that it has a design that you can easily recognize.

7. Open the shortcut menu for the 32x32 version of the icon, and then choose Delete Image Type.

8. Repeat steps 5 through 8 to add a second icon to the project resources, and name this icon WebPart.

9. In Solution Explorer, under the Resources folder for the WebPartNodeExtension project, open the shortcut menu for WebPartsNode.ico.

10. In the Properties window, choose the arrow next to Build Action, and then choose Embedded Resource on the menu that appears.

11. Repeat the last two steps for WebPart.ico.

Add the Web Part Gallery node to Server Explorer

Create a class that adds the new Web Part Gallery node to each SharePoint site node. To add the new node, the class implements the IExplorerNodeTypeExtension interface. Implement this interface whenever you want to extend the behavior of an existing node in Server Explorer, such as adding a child node to a node.

To add the Web Part Gallery node to Server Explorer

1. In the WebPartNodeExtension project, open the SiteNodeExtension code file, and then paste the following code into it.

   Note

   After you add this code, the project will have some compile errors, but they'll go away when you add code in later steps.

   using System.Collections.Generic;
   using System.ComponentModel.Composition;
   using Microsoft.VisualStudio.SharePoint.Explorer;
   
   namespace ServerExplorer.SharePointConnections.WebPartNode
   {
       // Enables Visual Studio to discover and load this extension.
       [Export(typeof(IExplorerNodeTypeExtension))]        
   
       // Indicates that this class extends SharePoint site nodes in Server Explorer.
       [ExplorerNodeType(ExplorerNodeTypes.SiteNode)]
   
       // Represents an extension of SharePoint site nodes in Server Explorer.
       internal class SiteNodeExtension : IExplorerNodeTypeExtension
       {
           public void Initialize(IExplorerNodeType nodeType)
           {
               // The NodeChildrenRequested event is raised when the user expands the
               // SharePoint site node in Server Explorer.
               nodeType.NodeChildrenRequested += NodeChildrenRequested;
           }
   
           // Creates the new Web Part Gallery node with the specified icon.
           private void NodeChildrenRequested(object sender, ExplorerNodeEventArgs e)
           {
               // The CreateWebPartNodes argument is a delegate that Visual Studio calls 
               // to create the child nodes under the Web Part Gallery node.
               e.Node.ChildNodes.AddFolder("Web Part Gallery",
                   Properties.Resources.WebPartsNode.ToBitmap(), CreateWebPartNodes);
           }
   
           // Creates all of the individual Web Part nodes under the new Web Part Gallery node.
           private void CreateWebPartNodes(IExplorerNode parentNode)
           {
               // Call the custom SharePoint command to get items from the Web Part gallery.
               var webParts = parentNode.Context.SharePointConnection.ExecuteCommand<WebPartNodeInfo[]>(
                   WebPartCommandIds.GetWebParts);
   
               if (webParts != null)
               {
                   foreach (WebPartNodeInfo webPart in webParts)
                   {
                       // Create a new annotation object to store the current Web Part item with the new node.
                       var annotations = new Dictionary<object, object>() 
                       { 
                           { typeof(WebPartNodeInfo), webPart } 
                       };
   
                       // Create the new node for the current Web Part item.
                       parentNode.ChildNodes.Add(WebPartNodeTypeProvider.WebPartNodeTypeId,
                           webPart.Name, annotations);
                   }
               }
           }
       }
   }
   

   Imports System.Collections.Generic
   Imports System.ComponentModel.Composition
   Imports Microsoft.VisualStudio.SharePoint.Explorer
   
   Namespace ServerExplorer.SharePointConnections.WebPartNode
   
       ' Export attribute: Enables Visual Studio to discover and load this extension.
       ' ExplorerNodeType attribute:  Indicates that this class extends SharePoint site nodes in Server Explorer.
       ' WebPartNodeTypeProvider class: Represents an extension of SharePoint site nodes in Server Explorer.
       <Export(GetType(IExplorerNodeTypeExtension))> _
       <ExplorerNodeType(ExplorerNodeTypes.SiteNode)> _
       Friend Class SiteNodeExtension
           Implements IExplorerNodeTypeExtension
   
           Private Sub Initialize(ByVal nodeType As IExplorerNodeType) _
               Implements IExplorerNodeTypeExtension.Initialize
   
               ' The NodeChildrenRequested event is raised when the user expands the
               ' SharePoint site node in Server Explorer.
               AddHandler nodeType.NodeChildrenRequested, AddressOf NodeChildrenRequested
           End Sub
   
           ' Creates the new Web Part Gallery node with the specified icon.
           Private Sub NodeChildrenRequested(ByVal Sender As Object, ByVal e As ExplorerNodeEventArgs)
   
               ' The CreateWebPartNodes argument is a delegate that Visual Studio calls 
               ' to create the child nodes under the Web Part Gallery node.
               e.Node.ChildNodes.AddFolder("Web Part Gallery", My.Resources.WebPartsNode.ToBitmap(), _
                   AddressOf CreateWebPartNodes)
           End Sub
   
           ' Creates all of the individual Web Part nodes under the new Web Part Gallery node.
           Private Sub CreateWebPartNodes(ByVal parentNode As IExplorerNode)
   
               ' Call the custom SharePoint command to get items from the Web Part gallery.
               Dim webParts = parentNode.Context.SharePointConnection.ExecuteCommand(Of WebPartNodeInfo())( _
                   WebPartCommandIds.GetWebParts)
               If webParts IsNot Nothing Then
                   For Each webPart As WebPartNodeInfo In webParts
   
                       ' Create a new annotation object to store the current Web Part item with the new node.
                       Dim annotations = New Dictionary(Of Object, Object)()
                       annotations.Add(GetType(WebPartNodeInfo), webPart)
   
                       ' Create the new node for the current Web Part item.
                       parentNode.ChildNodes.Add(WebPartNodeTypeProvider.WebPartNodeTypeId, _
                           webPart.Name, annotations)
                   Next
               End If
           End Sub
   
       End Class
   End Namespace
   

Define a node type that represents a web part

Create a class that defines a new type of node that represents a Web Part. Visual Studio uses this new node type to display child nodes under the Web Part Gallery node. Each child node represents a single Web Part on the SharePoint site.

To define the new node type, the class implements the IExplorerNodeTypeProvider interface. Implement this interface whenever you want to define a new type of node in Server Explorer.

To define the web part node type

1. In the WebPartNodeExtension project, open the WebPartNodeTypeProvder code file, and then paste the following code into it.

   Imports System
   Imports System.Collections.Generic
   Imports System.Windows.Forms
   Imports System.ComponentModel.Composition
   Imports Microsoft.VisualStudio.SharePoint
   Imports Microsoft.VisualStudio.SharePoint.Explorer
   
   Namespace ServerExplorer.SharePointConnections.WebPartNode
   
       ' Export attribute: Enables Visual Studio to discover and load this extension.
       ' ExplorerNodeType attribute: Specifies the ID for this new node type.
       ' WebPartNodeTypeProvider class: Defines a new node type that represents a Web Part on a SharePoint site.
       <Export(GetType(IExplorerNodeTypeProvider))> _
       <ExplorerNodeType(WebPartNodeTypeProvider.WebPartNodeTypeId)> _
       Friend Class WebPartNodeTypeProvider
           Implements IExplorerNodeTypeProvider
   
           Friend Const WebPartNodeTypeId As String = "Contoso.WebPart"
   
           Private Sub InitializeType(ByVal typeDefinition As IExplorerNodeTypeDefinition) _
               Implements IExplorerNodeTypeProvider.InitializeType
   
               typeDefinition.DefaultIcon = My.Resources.WebPart.ToBitmap()
               typeDefinition.IsAlwaysLeaf = True
               AddHandler typeDefinition.NodePropertiesRequested, AddressOf NodePropertiesRequested
           End Sub
   
           ' Retrieves properties that are displayed in the Properties window when
           ' a Web Part node is selected.
           Private Sub NodePropertiesRequested(ByVal Sernder As Object, _
               ByVal e As ExplorerNodePropertiesRequestedEventArgs)
   
               Dim nodeInfo = e.Node.Annotations.GetValue(Of WebPartNodeInfo)()
   
               ' Call the custom SharePoint command to get the Web Part properties.
               Dim properties As Dictionary(Of String, String) = _
                   e.Node.Context.SharePointConnection.ExecuteCommand( _
                   Of WebPartNodeInfo, Dictionary(Of String, String))(
                   WebPartCommandIds.GetWebPartProperties, nodeInfo)
               Dim propertySource As Object = e.Node.Context.CreatePropertySourceObject(properties)
               e.PropertySources.Add(propertySource)
           End Sub
   
       End Class
   End Namespace
   

   using System;
   using System.Collections.Generic;
   using System.Windows.Forms;
   using System.ComponentModel.Composition;
   using Microsoft.VisualStudio.SharePoint;
   using Microsoft.VisualStudio.SharePoint.Explorer;
   
   namespace ServerExplorer.SharePointConnections.WebPartNode
   {
       // Enables Visual Studio to discover and load this extension.
       [Export(typeof(IExplorerNodeTypeProvider))]
   
       // Specifies the ID for this new node type.
       [ExplorerNodeType(WebPartNodeTypeProvider.WebPartNodeTypeId)]
   
       // Defines a new node type that represents a Web Part on a SharePoint site.
       internal class WebPartNodeTypeProvider : IExplorerNodeTypeProvider
       {
           internal const string WebPartNodeTypeId = "Contoso.WebPart";
   
           public void InitializeType(IExplorerNodeTypeDefinition typeDefinition)
           {
               typeDefinition.DefaultIcon = Properties.Resources.WebPart.ToBitmap();
               typeDefinition.IsAlwaysLeaf = true;
               typeDefinition.NodePropertiesRequested += NodePropertiesRequested;
           }
   
           // Retrieves properties that are displayed in the Properties window when
           // a Web Part node is selected.
           private void NodePropertiesRequested(object sender,
               ExplorerNodePropertiesRequestedEventArgs e)
           {
               var webPartNodeInfo = e.Node.Annotations.GetValue<WebPartNodeInfo>();
   
               // Call the custom SharePoint command to get the Web Part properties.
               Dictionary<string, string> properties =
                   e.Node.Context.SharePointConnection.ExecuteCommand<
                   WebPartNodeInfo, Dictionary<string, string>>(
                   WebPartCommandIds.GetWebPartProperties, webPartNodeInfo);
   
               object propertySource = e.Node.Context.CreatePropertySourceObject(properties);
               e.PropertySources.Add(propertySource);
           }
       }
   }
   

Define the web part data class

Define a class that contains data about a single Web Part on the SharePoint site. Later in this walkthrough, you will create a custom SharePoint command that retrieves data about each Web Part on the site and then assigns the data to instances of this class.

To define the web part data class

1. In the WebPartNodeExtension project, open the WebPartNodeInfo code file, and then paste the following code into it.

   Imports System
   
   Namespace ServerExplorer.SharePointConnections.WebPartNode
   
       ' Contains basic data about a single Web Part on the SharePoint site. This class is 
       ' serializable so that instances of it can be sent between the WebPartNode and 
       ' WebPartCommands assemblies.
       <Serializable()> _
       Public Class WebPartNodeInfo
   
           Private siteIdValue As Guid
           Public Property SiteId As Guid
               Get
                   Return siteIdValue
               End Get
               Set(ByVal value As Guid)
                   siteIdValue = value
               End Set
           End Property
   
           Private idValue As Integer
           Public Property Id As Integer
               Get
                   Return idValue
               End Get
               Set(ByVal value As Integer)
                   idValue = value
               End Set
           End Property
   
           Private uniqueIdValue As Guid
           Public Property UniqueId As Guid
               Get
                   Return uniqueIdValue
               End Get
               Set(ByVal value As Guid)
                   uniqueIdValue = value
               End Set
           End Property
   
           Private nameValue As String
           Public Property Name As String
               Get
                   Return nameValue
               End Get
               Set(ByVal value As String)
                   nameValue = value
               End Set
           End Property
   
           Private imageUrlValue As String
           Public Property ImageUrl As String
               Get
                   Return imageUrlValue
               End Get
               Set(ByVal value As String)
                   imageUrlValue = value
               End Set
           End Property
   
       End Class
   End Namespace
   

   using System;
   
   namespace ServerExplorer.SharePointConnections.WebPartNode
   {
       // Contains basic data about a single Web Part on the SharePoint site. This class is 
       // serializable so that instances of it can be sent between the WebPartNode and 
       // WebPartCommands assemblies.
       [Serializable]
       public class WebPartNodeInfo
       {
           public Guid SiteId { get; set; }
           public int Id { get; set; }
           public Guid UniqueId { get; set; }
           public string Name { get; set; }
           public string ImageUrl { get; set; }
       }
   }
   

Define the IDs for the SharePoint commands

Define several strings that identify the custom SharePoint commands. You will implement these commands later in this walkthrough.

To define the command IDs

1. In the WebPartNodeExtension project, open the WebPartCommandIds code file, and then paste the following code into it.

   namespace ServerExplorer.SharePointConnections.WebPartNode
   {
       public static class WebPartCommandIds
       {
           public const string GetWebParts = "WebPart.GetWebParts";
           public const string GetWebPartProperties = "WebPart.GetProperties";
       }
   }
   

   Namespace ServerExplorer.SharePointConnections.WebPartNode
   
       Public Class WebPartCommandIds
           Public Const GetWebParts As String = "WebPart.GetWebParts"
           Public Const GetWebPartProperties As String = "WebPart.GetProperties"
       End Class
   
   End Namespace
   

Create the custom SharePoint commands

Create custom commands that call into the server object model for SharePoint to retrieve data about the Web Parts on the SharePoint site. Each command is a method that has the SharePointCommandAttribute applied to it.

To define the SharePoint commands

1. In the WebPartCommands project, open the WebPartCommands code file, and then paste the following code into it.

   using System.Collections.Generic;
   using Microsoft.SharePoint;
   using Microsoft.VisualStudio.SharePoint.Commands;
   
   namespace ServerExplorer.SharePointConnections.WebPartNode
   {
       internal class WebPartsCommands
       {
           // Gets data for each Web Part on the SharePoint site, and returns an array of 
           // serializable objects that contain the data.
           [SharePointCommand(WebPartCommandIds.GetWebParts)]
           private static WebPartNodeInfo[] GetWebParts(ISharePointCommandContext context)
           {
               var nodeInfos = new List<WebPartNodeInfo>();
               SPListItemCollection webParts = context.Site.GetCatalog(
                   SPListTemplateType.WebPartCatalog).Items;
   
               foreach (SPListItem webPart in webParts)
               {
                   WebPartNodeInfo nodeInfo = new WebPartNodeInfo
                   {
                       Id = webPart.ID,
                       SiteId = webPart.ParentList.ParentWeb.ID,
                       Name = webPart.Title,
                       UniqueId = webPart.UniqueId,
                       ImageUrl = webPart.ParentList.ImageUrl
                   };
                   nodeInfos.Add(nodeInfo);
               }
   
               return nodeInfos.ToArray();
           }
   
           // Gets additional property data for a specific Web Part.
           [SharePointCommand(WebPartCommandIds.GetWebPartProperties)]
           private static Dictionary<string, string> GetWebPartProperties(ISharePointCommandContext context, 
               WebPartNodeInfo nodeInfo)
           {
               SPList webParts = context.Site.GetCatalog(SPListTemplateType.WebPartCatalog);
               SPListItem webPart = webParts.Items[nodeInfo.UniqueId];
   
               return SharePointCommandServices.GetProperties(webPart);
           }
       }
   }
   

   Imports System.Collections.Generic
   Imports Microsoft.SharePoint
   Imports Microsoft.VisualStudio.SharePoint.Commands
   
   Namespace ServerExplorer.SharePointConnections.WebPartNode
   
       Friend Class WebPartsCommands
   
           ' Gets data for each Web Part on the SharePoint site, and returns an array of 
           ' serializable objects that contain the data.
           <SharePointCommand(WebPartCommandIds.GetWebParts)> _
           Private Shared Function GetWebParts(ByVal context As ISharePointCommandContext) As WebPartNodeInfo()
   
               Dim nodeInfos = New List(Of WebPartNodeInfo)()
               Dim webParts As SPListItemCollection = context.Site.GetCatalog( _
                   SPListTemplateType.WebPartCatalog).Items
   
               For Each webPart As SPListItem In webParts
                   Dim nodeInfo As WebPartNodeInfo = New WebPartNodeInfo()
                   With nodeInfo
                       .Id = webPart.ID
                       .SiteId = webPart.ParentList.ParentWeb.ID
                       .Name = webPart.Title
                       .UniqueId = webPart.UniqueId
                       .ImageUrl = webPart.ParentList.ImageUrl
                   End With
                   nodeInfos.Add(nodeInfo)
               Next
               Return nodeInfos.ToArray()
           End Function
   
           ' Gets additional property data for a specific Web Part.
           <SharePointCommand(WebPartCommandIds.GetWebPartProperties)> _
           Private Shared Function GetWebPartProperties(ByVal context As ISharePointCommandContext, _
               ByVal webPartNodeInfo As WebPartNodeInfo) As Dictionary(Of String, String)
   
               Dim webParts As SPList = context.Site.GetCatalog(SPListTemplateType.WebPartCatalog)
               Dim webPart As SPListItem = webParts.Items(webPartNodeInfo.UniqueId)
               Return SharePointCommandServices.GetProperties(webPart)
           End Function
       End Class
   End Namespace
   

Checkpoint

At this point in the walkthrough, all the code for the Web Part Gallery node and the SharePoint commands are now in the projects. Build the solution to make sure that both projects compile without errors.

To build the solution

1. On the menu bar, choose Build > Build Solution.

   Warning

   At this point, the WebPartNode project may have a build error because the VSIX manifest file doesn't have a value for Author. This error will go away when you add a value in later steps.

Create a VSIX package to deploy the extension

To deploy the extension, use the VSIX project in your solution to create a VSIX package. First, configure the VSIX package by modifying the source.extension.vsixmanifest file in the VSIX project. Then, create the VSIX package by building the solution.

To configure the VSIX package

1. In Solution Explorer, under the WebPartNode project, open the source.extension.vsixmanifest file in the manifest editor.

   The source.extension.vsixmanifest file is the basis for the extension.vsixmanifest file that all VSIX packages require. For more information about this file, see VSIX Extension Schema 1.0 Reference.

2. In the Product Name box, enter Web Part Gallery Node for Server Explorer.

3. In the Author box, enter Contoso.

4. In the Description box, enter Adds a custom Web Part Gallery node to the SharePoint Connections node in Server Explorer. This extension uses a custom SharePoint command to call into the server object model.

5. Choose the Assets tab of the editor, and then choose the New button.

   The Add New Asset dialog box appears.

6. In the Type list, choose Microsoft.VisualStudio.MefComponent.

   Note

   This value corresponds to the MefComponent element in the extension.vsixmanifest file. This element specifies the name of an extension assembly in the VSIX package. For more information, see MEFComponent Element (VSX Schema).

7. In the Source list, choose A project in current solution.

8. In the Project list, choose WebPartNodeExtension and then choose the OK button.

9. In the manifest editor, choose the New button again.

   The Add New Asset dialog box appears.

10. In the Type box, enter SharePoint.Commands.v4.

    Note

    This element specifies a custom extension that you want to include in the Visual Studio extension. For more information, see Asset Element (VSX Schema).

11. In the Source list, choose the A project in current solution list item.

12. In the Project list, choose WebPartCommands, and then choose the OK button.

13. On the menu bar, choose Build > Build Solution, and then make sure that the solution compiles without errors.

14. Make sure that the build output folder for the WebPartNode project now contains the WebPartNode.vsix file.

    By default, the build output folder is the ..\bin\Debug folder under the folder that contains your project file.

Test the extension

You're now ready to test the new Web Part Gallery node in Server Explorer. First, start debugging the extension in an experimental instance of Visual Studio. Then, use the new Web Parts node in the experimental instance of Visual Studio.

To start debugging the extension

1. Restart Visual Studio with administrative credentials, and then open the WebPartNode solution.

2. In the WebPartNodeExtension project, open the SiteNodeExtension code file, and then add a breakpoint to the first line of code in the NodeChildrenRequested and CreateWebPartNodes methods.

3. Choose the F5 key to start debugging.

   Visual Studio installs the extension to %UserProfile%\AppData\Local\Microsoft\VisualStudio\11.0Exp\Extensions\Contoso\Web Part Gallery Node Extension for Server Explorer\1.0 and starts an experimental instance of Visual Studio. You will test the project item in this instance of Visual Studio.

To test the extension

1. In the experimental instance of Visual Studio, on the menu bar, choose View > Server Explorer.

2. Perform the following steps if the SharePoint site that you want to use for testing doesn't appear under the SharePoint Connections node in Server Explorer:

   1. In Server Explorer, open the shortcut menu for SharePoint Connections, and then choose Add Connection.

   2. In the Add SharePoint Connection dialog box, enter the URL for the SharePoint site to which you want to connect, and then choose the OK button.

      To specify the SharePoint site on your development computer, enter http://localhost.

3. Expand the site connection node (which displays the URL of your site), and then expand a child site node (for example, Team Site).

4. Verify that the code in the other instance of Visual Studio stops on the breakpoint that you set earlier in the NodeChildrenRequested method, and then choose F5 to continue to debug the project.

5. In the experimental instance of Visual Studio, verify that a new node named Web Part Gallery appears under the top-level site node, and then expand the Web Part Gallery node.

6. Verify that the code in the other instance of Visual Studio stops on the breakpoint that you set earlier in the CreateWebPartNodes method, and then choose the F5 key to continue to debug the project.

7. In the experimental instance of Visual Studio, verify that all Web Parts on the connected site appear under the Web Part Gallery node in Server Explorer.

8. In Server Explorer, open the shortcut menu for one of the Web Parts, and then choose Properties.

9. In the instance of Visual Studio that you're debugging, verify that details about the Web Part appear in the Properties window.

Uninstall the extension from Visual Studio

After you finish testing the extension, uninstall the extension from Visual Studio.

To uninstall the extension

1. In the experimental instance of Visual Studio, on the menu bar, choose Tools > Extensions and Updates.

   The Extensions and Updates dialog box opens.

2. In the list of extensions, choose Web Part Gallery Node Extension for Server Explorer, and then choose the Uninstall button.

3. In the dialog box that appears, choose the Yes button to confirm that you want to uninstall the extension, and then choose the Restart Now button to complete the uninstallation.

4. Close both instances of Visual Studio (the experimental instance and the instance of Visual Studio in which the WebPartNode solution is open).

See also

• Extend the SharePoint connections node in Server Explorer
• Walkthrough: Call into the SharePoint client object model in a Server Explorer extension
• Image Editor for Icons
• Creating an Icon or Other Image (Image Editor for Icons)