Guest Author: Ken Price
www.thesharepointblog.com

Starting out with the “SharePoint’s Default Web Parts” series, I picked the most basic parts that users select to build out their sites. The first four web parts we’ll explore are the Content Editor Web Part, Content Query Web Part, Query String (URL) Web Part and RSS Viewer Web Part.

Content Editor Web Part (CEWP)

This web part is the probably the most used of all of the web parts from a user perspective because it is very flexible and easy to configure. Users can format content, insert images and hyperlinks to other sites, or even add scripts or style tags to the CEWP and change the look of their site. There are very few pitfalls of the CEWP, but the first issue that pops up is usually around governance, this issue exists because of the lack of control of how users apply fonts and colors within the CEWP, that being said, we’ll jump right into some other features of the CEWP.

The “Appearance” section has the typical options; Title, Height, Width, Chrome State and Chrome Type. It’s the “Layout” section that has an unassuming option that we are going to use, that’s the “Hidden” attribute under the properties dialog box.

Now we’re going to change the style of SharePoint by adding a style in a CEWP that will override a Cascading Style Sheet (CSS) property. Add the following text to an empty (and soon to be hidden) CEWP and see what happens.

<STYLE>
.ms-quicklaunch {
display: none;
}
</STYLE>

This will remove the Quick Launch navigation on the left-hand side of the page (NOTE: Use this for good because this will cause your help desk issues when you call in for help and they can’t find the Quick Launch). Now there are even simpler changes that you could try, like changing the Web Part title font or color, that would be a good start. The hidden feature will make the styles appear like they are incorporated in your site’s design. Using this method will require you to add a new CEWP to each page and copy the style.

The next property to explore is the “Content Link” property, this allows the CEWP to link to a file with HTML inside and change content based on a file in a document library, versus changing out the content by copying and pasting. The Content Link locates the provided link by pressing the “Test Link” hyperlink.

As an example, upload a text (.txt) file to a document library, copy the URL to the file (should be something like http://mysharepointserver.company.com/site1/docs/formattedheadline1.txt), go to a CEWP, paste in the link to the Content Link and click ok. From there you should see the formatted content. If you are going to go across sites or site collections, you will have to tune permissions to access the file.

To change the way the CEWP is displayed, you change the Chrome Type to either show a border (Border Only), Title Only, Title and Border, Neither Title nor Border (none) or accept the default option.

 

Once the CEWP is complete, you can go back and modify your content by choosing to edit with the Source Editor

Click “Save” and your changes will be available immediately.

Content Query Web Part (CQWP):  

This web part pulls content from the same site collection or sub-sites within your site collection and displays the selected type of content in your site. If you need to access content from different or many site collections in SharePoint 2007, you will have to find a third-party tool (Lightning Conductor Web Part is one that I have used in the past), but can pull information from other sites (webs) within a site collection and bubble them up to the top site. Let’s try it out.

1. Add a CQWP to your page.
2. Modify this web part and navigate to the “Query” section.
3. Select “Show items from the following site and sub-sites” and browse for a site.


4. Navigate to the site (Select Site – Webpage Dialog)


5. Select a site, in this case “EUSP Test Web”
6. Select a list type in the “Show items from this list type” drop down list. In this case we will stay with “Announcements”.


7. Then change the style.
 


This is the final result…

To make the result a little more transparent, you could set the web chrome to “none”.

Query String (URL) Web Part

The Query String (URL) Web Part is used to parse the URL’s Query String (a value after the “?” in the URL followed by “&” to separate multiple values). Essentially you can provide some application functionality to your SharePoint pages.

In this overview, we’re going to take a page and connect two web parts and Query String Web Parts to display special images and documents.

By default the web part is hidden when added to a Web Part page.

1. Name the Query String filter, ours will be named Default Query String
2. Assign “img” and the query string value that we want to evaluate.
3. Provide a default value in case there is an “img” query string value.
4. Click the “OK” button and the Query String web part will be on your page.


5. Next add an Image Web Part to your page.
6. Connect the part by selecting the Query String web parts options, then click “Connections”, then “Get Images From”, then select the “Query String Filter [1]” in our case.

In this case, the “img” query string value, which passes the image location to our Image Viewer web part.

Produces the SharePoint 2010 logo in the Image Web Part…

From this image, I have highlighted the “Author” and “Img” query string values and how the connection from the Query String Web Part to the Shared Documents document library and the Image Viewer Web Part. You can see how you could create a “Dashboard” from custom links and query string values. This is a very powerful and enabling feature for users and with a no-code solution from a maintenance perspective.

RSS Viewer Web Part

The next web part to review is the “RSS Viewer Web Part” and it’s available under the “Default” web part category when adding a web part to a page. The RSS Viewer web part retrieves

1. In this case, we’ll select a RSS (Real Simple Syndication) Viewer that we are going to manipulate to display headline from a RSS feed available on the Internet.


2. Next we’ll add a RSS feed from a site (in this case Yahoo’s Headlines) and we’ll accept the default of “5” as the feed limit. The feed limit simply allows us to choose the number of items to display within the web part container.
3. Check the “Show feed title and description” just so we have more text to view.


4. Next, override the style classes which exist in the RSS template. Overriding allows you to create a style that uses the same class name, but change the way it’s displayed in the browser. All of the classes I’ve chosen are classes that exist already, but just modified the elements within them to get to the final result we’ll see in a moment.
5. Click the “XSL Editor…” and find the “rss” template. Add the three overridden classes to an inline style sheet.

To find out which classes are being used, I utilize IE 8’s Developer Tools (F12) and have written a quick article about that on my blog you can use as a reference.

So this is before we made the changes to the style sheet …

And this is after we’ve add the classes to the inline style sheet…

We could examine more classes and make more changes, but in this case adding a background color, border and changing the font really made a big difference. Again, setting the web part’s Chrome Type to “none” would also make the content appear like it was baked into the site.

Next up, we’ll explore the Key Performance Indicators, KPI Details, Page Viewer and Image Viewer parts.

Guest Author: Ken Price
www.thesharepointblog.com

Ken has 4 years experience with SharePoint, working with Fortune 500 companies to deploy collaboration and web content management solutions.  He is currently a Senior SharePoint Consultant at RDA Corporation and resides in Charlotte, North Carolina. He also speaks at SharePoint community events and blogs at www.thesharepointblog.com.