Microsoft SharePoint 2010 : WebParts and SharePoint Pages - Using SharePoint Designer with WebParts

1. What Are WebParts?

Modern web sites have different elements on their web pages. Each one of these elements provides unique functionality to end users. Sometimes these elements can be configurable or sometimes these events can talk to each other. These elements occupy rectangular areas on a web page. Different technologies use different words for these elements. Some technologies call them portlets. Some technologies call them widgets. SharePoint chooses to call them WebParts.

2. What Are SharePoint Pages?

SharePoint pages are simply ASPX's that you would use to browse through your SharePoint web site. Some of these pages come from the file system and are called application pages, whereas some other pages come from the database and are called site pages. There are unique differences between the usage and deployment of application pages and site pages. Also, some of these pages can be used to host WebParts. Sometimes they are called as WebPartPages, but WebPartPages are usually site pages. Technically speaking, you can have an application page host WebParts as well, but as you will learn by convention application pages seem to have a different purpose in SharePoint than site pages.

3. Using SharePoint Designer with WebParts

There are three ways to deliver functionality in SharePoint.

• Through the browser

• Through SharePoint Designer

• Through Visual Studio

Each one of these options is successively more complicated and more compelling in its effort and results.

The specific WebPart you will be working with is the XSLT List View WebPart, referred to in code as the XsltListViewWebPart. There used to be a rather important WebPart in SharePoint 3.0 called the DataViewWebPart. The XsltListViewWebPart is a better and improved replacement for the DataViewWebPart. The DataViewWebPart is still available, but the XsltListViewWebPart is much easier and better to use, and I hope you will agree with me by the end of a real-world example.

To begin, I created a simple list based on the Custom List template. Then I added a column and called it "Population ". This column will hold numeric data, so I made it a "Number" kind of a column. Then, I went to http://www.census.gov/ipc/www/idb/ranks.php and got myself some sample data. You can tell that I am trying to come up with some data for a real-world example. If you prefer to be adventurous and create your very own sample data, be my guest!

Once my list is populated with some sample data, I will next start using the XsltListViewWebPart to customize the presentation of data in my List.

To recap, my source data is a Custom List with a column called "Population". I put in some sample data to show populations of the top 50 most populous countries in the world.

First, start SharePoint Designer 2010. SharePoint Designer 2010 is a tool that ships with Office 2010. It is intended for use by developers and moderately sophisticated business users. The equivalent tool in SharePoint 2007 was SharePoint Designer 2007. SharePoint Designer 2010 can be used only with SharePoint 2010 sites; it cannot be used with SharePoint 2007 sites. Therefore, if you have SharePoint 2007 sites to manage as well, you can install SharePoint Designer 2007 and SharePoint Designer 2010 side by side on the same machine. However, it is important to note that if you need to install SharePoint Designer 2007 and SharePoint Designer 2010 on the same machine both of them will need to be 32 bit only. You cannot have 64 bit office 2010 and SharePoint Designer 2007 on the same machine. Personally speaking, I virtualize my work, so this is never an issue for me anyway.

Assuming that you have SharePoint Designer 2010 open and running on your machine now, click the open site button in SharePoint Designer, as shown in Figure 1.

Figure 1. Opening a site in SharePoint Designer

When prompted to enter a site name enter, http://sp2010. If you have worked with SharePoint Designer 2007 before, you would note that SharePoint Designer 2010 presents a completely different task oriented UI. What you should intend to do next is to edit the site home page and use the XsltListViewWebPart to display the information from the countries list in a user-friendly form.

In SharePoint Designer 2010 with your site open in the customization section, click the edit sites home page link, as shown in Figure 2.

Figure 2. Editing the site home page

Clicking on the edit site home page link opens the home page of the site in edit mode. Next, click the left WebPartZone and then click the Insert tab on the ribbon in SharePoint Designer. Under the insert, look for the data view button. Click the data view button and choose the countries list under lists, as shown in Figure 3.

Figure 3. Inserting the countries list

This would insert the country's list using the XsltListViewWebPart, as shown in Figure 4.

Figure 4. The XsltListViewWebPart displaying the countries list

If you saved the homepage in SharePoint Designer, refresh the page in your browser and you should see the countries list data surface on the home page of the site.

But let's make it a little bit more interesting. Go ahead and click any of the numeric population cells you see on the right. With your cursor in the numeric population cell, look for the options tab under list view tools in the SharePoint Designer ribbon. Click the conditional formatting button and then choose format column, as shown in Figure 5.

Figure 5. Choosing to format a column in SharePoint Designer

You will next be prompted with two dialog boxes: the first asks you for a condition for the column and the second asks you for a visual formatting style. Using these two dialog boxes, choose to format countries with population greater than 80,000,000 with a background color of pink. Next, save the page and using your browser visit http://sp2010. Note that the country's list information is showing on the homepage. Go ahead and sort the title column in ascending order. Now note that the formatting information you specified is carried through even when the sort order is changed. This can be seen in Figure 6.

As you can see, the XsltListViewWebPart gives you immense flexibility in formatting how your list looks in the browser. Before jumping into the next section, I'd like you to try two other things.

First, I'd like you to see some other WebParts you can insert using SharePoint Designer on a web page and how you can customize them. Go ahead and play with SharePoint Designer 2010 a little.

The second thing, and perhaps the more interesting, I'd like you to try is to visit the countries list in the browser one more time, and click the list tab in the ribbon. Look for the Modify View dropdown and choose Modify in SharePoint Designer, as shown in Figure 7.

Figure 6. The countries list with conditional formatting applied

Figure 7. Modifying the view of a list