Reusing Your Customized SharePoint Web Parts

Let’s say you have a sweet web part, it might be something cool with JavaScript, jQuery, or SPServices, a simple weather web part, a data view web part, or an image. Whatever you made (with some exception, keep reading), you can export your web part and copy it over to another page or site within SharePoint, or even to an entirely different SharePoint farm, to quickly reuse your master piece.

The process is straight forward, and applies to a few web parts. Unfortunately, the normal list view web parts (viewing lists and libraries in your site) are not exportable, and cannot be copied to another site or page. You’ll have to recreate those on each page. The common exportable web parts include the Content Editor, HTML Form, XML Viewer, Image Viewer and Page Viewer. Basically, anything that’s highly customizable.

Once you have your web part done and ready to be exported and copied to another location, you want to edit the web part (hit the web part menu at the top right). When it’s in edit mode, click the web part menu again and you’ll see the Export option.

Export a SharePoint web part

Click Export. You will be prompted to download the file. The file name will assume the title of your web part, with a suffix of .dwp. Save this file onto your computer.

Your web part is now exported! If you plan on moving this to another site or farm, make sure you download any supporting files, like jQuery, SPServices, images, etc. which will be needed by the web part.

You have two options to reuse this exported web part.

  1. You can upload it and use it on a per need basis, per page/site as needed.
  2. You can upload it to the web part gallery and make it available across the site collection.

We’ll walk through both options.

First, if you want to use this per page/site:

  • Navigate to that page.
  • Edit the page (which you know how to do since you created the web part, but just in case you forgot, press the Site Actions menu at the top, select Edit Page).
  • If you’re using a wiki page, place your cursor in the content below where you want your web part to appear. Press the insert tab in the ribbon, then click Web Part.
  • If you’re using a web part page, click the Add a Web Part button above the zone you wish to add the web part to.
  • In the ribbon, below the list of categories is a little link labeled Upload a Web Part. Click that and click Browse, select your dwp file you downloaded previously and click Upload.
    Upload web part to SharePoint
  • After it uploads, you may lose the insert web part ribbon. Just click the Insert Web Part option again.
  • At the top of the categories list you should see a new folder Imported Web Parts. Your web part should be in there. Go ahead and insert it!

You can repeat these same steps on each page or site you wish to use the web part on.

In some cases, you may want to use this web part across an entire site collection, giving power users and other admins the ability to use it at their discretion. This is just as simple as above.

  • Navigate to the root site.
  • Go to Site Settings (Site Actions > Settings).
  • Click Web Parts under Galleries.
    • If you’re not in the root site, you won’t see this link. Click Go to top level site settings under Site Collection Administration.
  • Click Documents in the ribbon and click Upload. Just like any other document library, you can navigate to your downloaded file and upload it.
  • After it’s uploaded, you’ll be prompted to save some meta data about the file. Here you can rename the web part if needed, give it a description, and specify which group to save it in. I suggest specifying a group which will make it easy to find, like CompanyName, or My Web Parts.
  • Click Save.

Now when you go to edit a page and add a web part, you’ll see your new group on the left, which will contain your web part.

Uploaded Web Part to Site Collection Gallery

Happy SharePointing!

Advertisements

One thought on “Reusing Your Customized SharePoint Web Parts

  1. Pingback: Link Resource # 55 : May 18 – May 24 « Dactylonomy of Web Resource

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s