hit counter script
Skip to main content

Go Search
SharePoint for End Users
  

 Other Blogs

  EndUserSharePoint.com by Mark Miller
  Microsoft SharePoint Team Blog
  Michael Gannotti on SharePoint+
  SharePoint Design by Heather Solomon
  Asif's Blog by Asif Rehmani
  Ian’s SharePoint Blog by Ian Morrish
  SharePoint Demystified
  Siolon - Chris Poteet
  SharePoint Guru - Rod Stagg
SharePoint for End Users > Categories
Make your SharePoint pages pop with the Content Editor Web Part

I spend a lot of time managing and updating Web pages on our internal Microsoft Office SharePoint Web site. MOSS is great for displaying lists, libraries, and calendars of shared items and events using Web parts. When I first starting creating pages, though, it wasn’t clear to me how to do things like add headings, add explanatory content, or use formatted text to make a page look more appealing. Then I found the Content Editor Web Part, which is now one of my favorite Web parts. It allows you to add HTML, formatted text, tables, and images to a page to help clarify, explain, or add emphasis to whatever you’re trying to communicate. For example… here’s a typical default SharePoint page with an Announcements Web part and a Calendar Web part at the top of the page.

Default page 

This a good start for a page, but it doesn’t quickly communicate what the page is about, grab the attention of your audience, or look very appealing. That’s where the Content Editor Web Part comes in. You can use this versatile Web part to add a heading, graphic, and introductory paragraph to your page, like this:

Content Editor Web Part

To create something similar with a Content Editor Web part on your Microsoft Office SharePoint Web page, follow this procedure (which assumes you have permissions to edit the page you’re working on):

1.     On your page, click Site Actions, and then click Edit Page.

2.     In the area where you want to add the Content Editor Web Part, click Add a Web Part.

3.     In the Add Web Parts dialog box, scroll down to the Miscellaneous section, and then click Content Editor Web Part, and then click Add.

4.     The Web Part is added to your page. Click the link that says open the tool pane...

5.     The tool pane usually displays on the right of the page. You may need to scroll to find it. Once you find it, click Rich Text Editor to start adding formatted content and images. Or, click Source Editor to add HTML code. See the Tips and Tricks below for info on styles, graphics, and more.

6.     Add your content, and click OK (in the rich text editor) or Save (in the source editor) when you’re done.

 

Tips and Tricks

·       In the Rich Text Editor, use the buttons on the toolbar for formatting, adding tables, hyperlinks, and images.

·       Images: Upload your image to your site before attempting to add an image to the Web part. Once you’ve uploaded your image to the site, you can add the image to the Web part by clicking the Image button (or CTRL+SHIFT+G) and click browse to find your image on the site. Then, you can choose how to display the image within the text. For example, under Alignment in the Edit Image Properties dialog box, choose Left to place the image to the left side of the text (as in the screenshot shown above). To add space between the image and the text, add a number under Horizontal Spacing (pixels) or Vertical Spacing (pixels). I always start with 10.

·       Styles: Want to use predefined styles? Don’t click the Styles button. Instead, click the paragraph mark button and select a style such as Bulleted List, Heading 1, Heading 2, and so on.

·       So what is the Styles button for? I use it when I paste content into the Rich Text Editor from another source, and it doesn’t look quite right. So I click Remove Inline Styles under Styles to remove stray formatting brought in from the other source, and then reformat the text in the Rich Text Editor.

·       Title (Chrome): When you’re using the Content Editor Web Part to display a heading, you might not want the Content Editor Web Part title to show. To remove it, expand the Appearance section in the tool pane, and under Chrome Type, select None or Border Only.

·       Height and Width: You can specify a height and width for the Web part by expanding the Appearance section and clicking Yes under Height or Width, and then entering the size you want. You can choose to represent the size in Pixels, Inches, Points, and more.

·       Editing the HTML: If something just doesn’t look right and you can’t change it using the Rich Text Editor, you may need to edit the HTML directly. You can do this by clicking the Edit HTML Source button in the Rich Text Editor, or by closing the Rich Text Editor and clicking the Source Editor button in the tool pane. In cases where there is a lot of HTML to work with, I copy the HTML out into Notepad where I can wrap the text and use the Find tool to find what I’m looking for, make my changes, and then copy it back into the Source Editor. For especially complex HTML, I will copy the code into SharePoint Designer and work with it there.

 

For more information, see About the Content Editor Web Part on Office Online. 

 

This post also appears on Inside Office Online, where you can find the helpful news and tips on using Office programs.

 

Loreen

Use SharePoint and Silverlight to display a summary of SharePoint blog posts on any site page

by Rod Stagg, SharePoint Solutions Architect/Developer
http://www.rstagg.com | Allyis Inc., Kirkland, Wa

Overview:

We have been investigating ways on our intranet at Allyis to surface information via a more automatic and less manual process through various features and also to implement multiple ways for discovering data/information across the site.  One area in particular we have been looking for improvement has been to increase the discoverability of our leadership blogs and encourage employees throughout our organization to blog as as way to increase collaboration and information sharing. 

As a way to address these efforts we recently developed and deployed a suite of web-parts (one of which we call the BlogRollUp web-part) which displays details on the most recent post made to any of our SharePoint blogs.  The web-part can be added to any site page, configured to point to a specific blog, and uploaded into the web-part gallery for others to use as well. 

Single Post Version
Multi-Post Version

Features:

  • Displays blog title as a hyperlink to the original full post.
  • Displays the first 215 characters of the post body as an excerpt.
  • Displays an image for the blogger or blog.
  • Displays the post's category as a hyperlink to view all similiar posts.
  • Displays the number of comments as a hyperlink to the comments page.
  • Displays an alert icon hyperlinked to the blog's alert page.
  • Highlights background on mouseover.
  • Users can configure the web-part settings. 
  • Can be deployed across site collections. 

Technical Approach:

  • The user-interface was designed and developed entirely using Microsoft Expression Blend, Silverlight, and Visual Studio 2008. 
  • Custom SharePoint web-part to host the Silverlight application which allow users to configure which blog, blogger image, and alerts link from the web-part properties pane directly. 
  • The Silverlight application code uses the initParams provided from the webpart or HTML test page and the URL protocol to access the blog's post list directly.
  • The web-part can be configured once and easily exported from and imported to the webpart gallery and added to any site page on any site collection.   
  • The Silverlight application was deployed into a SharePoint document library for ease of future updates. 

Advantages of using Silverlight over a DataView Web-Part for instance include more portability, more rich user experience, and able to migrate to new sites/hardware easily.

  • Can be added to any site page on any site collection easily by the user without a developer or SharePoint Designer involved.
  • Can be easily deployed on our customer’s SharePoint sites and do not require a substantial effort to migrate to new hardware.
  • A more rich UI is possible using Silverlight and development is simplified using Visual Studio and C#.
  • The project files (.xap) developed in Silverlight are stored in standard SharePoint libraries and can be updated without the need for IT to be involved.

Deployment Methods:

Deployment using only a document library and a content editor web-part without the need to install server-side code and as such administrative access typically not required.

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download BlogRollUp.zip
  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder
  5. Locate the BlogRollUpTestPage.html, update the initParams to use the settings for your particular blog including siteurl, imagepath, listid, and alerturl. 
  6. Copy the updated BlogRollUpTestPage.html file to the root of your new document library.
  7. On a site page add a content editor web-part and reference the BlogRollUpTestPage.html file inside an iframe. 
  8. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the BlogRollUp webpart so other users can add to their site pages without having to configure themselves. 

Deployment using the custom web-part where server-side code is installed via the .wsp solution file for the webpart and typically requiring administrative access

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download BlogRollUp.zip
  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder.
  5. Download the .wsp solution file
  6. DownLoad BlogRollUpWP.wsp
  7. Install the provided .wsp solution file via stsadm -addsolution
  8. Activate the solution from SharePoint Central Administration or stsadm -activatefeature
  9. Upload the provided webpart .dwp file into your web-part gallery via site setting, web parts. 
  10. Add the web-part to a site page, update the Silverlight web-part settings section with the appropriate .XAP fullpath, siteurl, imagepath, listid, and alerturl for your particular blog
  11. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the blogrollup webpart so other users can add to thier site pages without having to configure themselves. 

Summary:

This is just one way of displaying some pertinent details on recent posts from the blogs dispersed throughout the intranet while also making it easy for users to add to any site page.  Using Silverlight allows .NET developers to develop rich UI in Expression and Visual Studio and store the .xap files in SharePoint document libraries for future updates. 

Displaying Related Documents Automatically

by Sandra Tersteeg, MCTS

Allyis |  www.allyis.com

 

A page of content on a site that is focused around a single subject or topic will often have related resources scattered throughout a SharePoint site collection in different libraries based on the team or groups that maintain them. A software product may have marketing requirements to define the features for an upcoming release that is produced by a product management team, while design specifications are managed by the development team and an administration guide is maintained by the technical editorial team. While each group maintains documents relating to the product within their own sites and libraries, there may be an area on the site that relates to everything about the product including its related documents.

 

Sometimes maintaining relevant documents is done manually by a single person or multiple people who are responsible for tying these related documents to the product information page or there may be very little process around maintaining related documents requiring the need to dig into each group.

 

Within SharePoint, there is a way to set this up so that any new or edited documents populate onto the page automatically. This is done through the use of SharePoint’s Content Type and Content Query Web Part. By utilizing Content Types to tag the documents, the Content Query Web Part will allow you to populate the related documents on the product page with no intervention after the initial configuration. Let me walk you through an example of how to create a page of content that will not only tell you what Product A is but will also automatically show all related documents to Product A.

 

Product A Page View

 

Step 1:  Create Site Columns

Within the site collection settings (Site Actions > Site Settings > Modify All Site Settings) begin by creating your site columns. For this example, I am using three site columns:  Product, Version and Type of Document.

 

Step 2:  Create Content Type & Associate Site Columns

Now create a new Content Type and associate the new site columns to the Content Type.

New Content Type

Note:  If possible, try to make these site columns required on the Content Type or on the library.

 

Step 3:  Associate Content Type to Document Libraries

  1. In each library settings, turn on Allow Content Types in Advanced settings.
  2. Then, add your new Content Type to the library. You may want to delete the default Document Content Type to prevent confusion and require the team members to use only the Content Type you just added.
  3. Set any default values to the site columns within the library, but not the Content Type, to save the team from having to select them each time if possible.

Step 4:  Apply Appropriate Metadata (Site Column) to Document

If you have a lot of documents to associate the content type to, the fastest way to do this is to turn off require checkout temporarily in Versioning Settings and edit the documents’ properties in a datasheet view. Make sure Content Type is checked as visible in the View, otherwise it will not appear in the datasheet view. Once you have modified documents, remember to turn back on require checkout.

 

All new documents created in the library using your new Content Type will have the columns already associated to the document.

 

Step 5:  Configure Content Query Web Part

Now you are ready to add and configure your Content Query Web Part.

Content Query Web Part Properties

  1. Create a web parts page anywhere on your SharePoint site collection. For this example, I am using a page of content that refers to ‘Product A.’
  2. Now edit the page and add a new web part from the gallery named ‘Content Query Web Part.’
  3. Initially, the web part will bring back everything on the site. You will need to fine tune it by choosing to Modify Shared Web Part.
  4. On the right Content Query Web Part properties panel:
    • Leave the Source as the default ‘Show items from all sites in the site collection.’
    • Choose a Document Library List Type.
    • Select the new Content Type you applied to the document libraries that you want to display on the page.
    • Similar to a view within a list or library, select a Filter to show where Product column is equal to your product, in this instance, ‘Product A.’
    • Under Grouping and Sorting, you can choose how to group such as by Product Version and which column to sort by such as ‘Created’ which is the date the document was created in the library.
    • Choose a default style similar to the styles available in the Summary Link Field Control or Content Type. If you are not familiar with these styles play around until you find one that fits your display on the page.
    • Update the title of the web part and its chrome.
  5. Finally, click OK and publish your page.

A few items to note about the Content Query Web Part is that multiple Content Query Web Parts on a page can begin to hinder the performance of the page loading and modifying styles, beyond what is readily available on the web part, displaying multiple columns and more advance features are not immediately available without some further customization to the CSS, XML and with the use of SharePoint Designer. However, it is great web part when you want to quickly display related documents from multiple sites in the SharePoint site collection.

SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

 

Overview

 

Recently I had a client request an animated carousel or filmstrip like player for displaying both images and embedded .wmv videos on their SharePoint intranet.  The idea is to display many images and videos without taking up a ton of screen space in the process.  Also, they wanted to be able to manage what images and videos get displayed via a standard SharePoint list, i.e. they could add links and descriptions in the SharePoint list and those would display appropriately in the filmstrip.

 

Example

 

Technical Analysis:

 

When evaluating a technical solution, it seemed like Silverlight would be the way to go for the filmstrip, Silverlight has built-in animation support, a media player for playing video, a rich set of controls, and good tool support with Expression Blend and Visual Studio 2008.   For accessing the links, etc. stored in the SharePoint list, the SharePoint web service - lists.asmx - seemed a logical choice. 

 

The catch:

 

The client’s IT department didn’t support custom ASPNET web applications or web services to be deployed without a huge review process or none at allJ.  The client’s SharePoint was pretty locked down to any custom development. 

 

The resolution:


There is a nifty yet fairly unknown protocol built in to SharePoint described on MSDN and the SharePoint SDK as the URL Protocol that allows you to query a list directly for all its list items.  Plus, you can do this using a simple URL in the browser and also from Javascript on the client.  I have used this fairly often since back in 2003 when I had to come up with a way to populate a Flash map with SharePoint data, so I was familiar with this protocol but not sure it would work in Silverlight. 

 

I broke out my Swiss-Army knife for SharePoint (URL Protocol aka owssrv.dll) and - good news! - it actually worked!  Silverlight can access data from a SharePoint list without the need to have a web service call.  Essentially using the same built-in web client classes inside Silverlight designed to access external web pages or files.    

 

So what is the SharePoint URL Protocol?


Excerpt from MSDN:

Embedding a request in a URL is a basic mechanism for issuing a method and its parameters to a server running Windows SharePoint Services.

 

The syntax

for using this mechanism is as follows:

[http://Server_Name/[sites/][Site_Name/]_vti_bin/owssvr.dll?Cmd=Display&List=GUID&XMLDATA=TRUE]

 

The details of using this syntax as part of your Silverlight application have been included in the code sample later in this post. 

 

The technical approach for the solution using Silverlight, a SharePoint list, and the URL protocol: 

 

Using Microsoft Expression Blend for the initial layout and Visual Studio 2008 for the C# code, I created an animated filmstrip (a variation of the all too familiar carousel in SilverlightJ) to display thumbnail images of the images and videos along with a main player area to display the larger view of the image/video when the user selected a thumbnail from the animated filmstrip. 

 

Advantages of using Silverlight:

Rich support for animation, rich set of controls, good development tools, i.e. Microsoft Expression Blend and Visual Studio 2008, and all the advantages of coding in C# with a simple deployment process.  You can even copy the Silverlight XAP files (essentially a compressed zip file with all your code) into a SharePoint document library and run from there along with a simple HTML page. 

 

Advantage of using a SharePoint list as the source data for the filmstrip player:

The administrator of the SharePoint list can designate what gets displayed in the filmstrip player automatically via the SharePoint list:

 

·          Designate the initial image/video that loads when the page loads.

·          Turn individual items visibility on/off

·          Select the appropriate thumbnail image and larger image

·          Select the appropriate URL for a video to be played in the video player

 

Advantages of using the URL protocol to populate the Silverlight filmstrip items:

It’s a lightweight HTTP protocol, can be accessed via a simple URL, and does not require web services to access the data in a SharePoint list. 

 

Example of the end solution:

 

Filmstrip player functionality:

·          Animated filmstrip displaying thumbnail images based on links provided in the SharePoint list.

·          Video player to play embedded .wmv video also based on links provided in the SharePoint list.

·          Image viewer to display larger image based on user selection in the filmstrip.

·          Main player section hot-linked to external URLs based on links provided in the SharePoint list.

·          User controls for the filmstrip animation

·          Pause/Play controls that turn on when video is loaded.

 

Example

Other potential uses?

  • Could be used on a Real Estate site to dynamically display images/video of the advertised home.
  • A video player for a blog using the blog to collect comments.
  • Basic slide show for a SharePoint document library or to display images from Flickr for instance in your SharePoint.

What's interesting about this implementation?

 

Using the URL protocol provides a simple mechanism for accessing SharePoint list data from within  Silverlight without the need to add a web service reference.

 

Using LINQ to XML to parse the returned data from the SharePoint in XML greatly simplifies working with the SharePoint list data in Silverlight once it’s retrieved.    

 

Using LINQ to XML also simplifies restructuring the data to a standard RSS feed format to use the data from the SharePoint list's built-in RSS feature as another option.

 

What's next on the feature front?

  • Adding the ability for users to leave comments and ratings.
  • Adding the ability for users to upload their own videos.

Code Example:

Example C# code for accessing the SharePoint list in Silverlight:

 

Silverlight 2 application attached to a ASPNET web project (I don't host the ASPNET app in SharePoint but easy way to generate the test.html and .XAP file)

 

 

public partial class Page : UserControl
    {
        private XNamespace z = "#RowsetSchema";      
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }
        public void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string sUrl = "
http://[server]/[site]/_vti_bin/owssvr.dll?Cmd=Display&List={[listguid]}&XMLDATA=TRUE";
            WebClient sp = new WebClient();
            sp.OpenReadCompleted += new OpenReadCompletedEventHandler(sp_OpenReadCompleted);
            sp.OpenReadAsync(new Uri(sUrl));
        }
void sp_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            if (e.Error == null)
            {
              
var items = from item in results.Descendants(z + "row")
                        where item.Attribute("ows_LinkTitle") != null
                        orderby (DateTime)item.Attribute("ows_Created") descending
                        select new FilmFrame
                        {
                            ItemTitle = (string)item.Attribute("ows_Title"),
                            ItemLinkTitle = (string)item.Attribute("ows_LinkTitle"),
                            ItemType = (string)item.Attribute("ows_ItemType"),
                            ItemSourceUrl = (string)item.Attribute("ows_SourceUrl"),
                            ItemThumbnailUrl = (string)item.Attribute("ows_Thumbnail"),
                            ItemDescription = (string)item.Attribute("ows_Description"),
                            ItemDisplayFilmStrip = (string)item.Attribute("ows_DisplayInFilmstrip"),
                            ItemCreated = (DateTime)item.Attribute("ows_Created"),
                        };
//You can bind to an itemtemplate for a listview directly for simplicity-the specfic example UI above builds the XAML dynamically to provide more

flexibility
 //ListView.ItemsSource = items;
            }
        }

 

Separate namespace for filmstripitem:
namespace FilmStrip
{
    public class FilmStripItem
    {
        public string ItemTitle { get; set; }
        public string ItemLinkTitle{ get; set; }
        public string ItemSourceUrl { get; set; }
        public string ItemType { get; set; }
        public string ItemDescription { get; set; }
        public string ItemDisplayFilmStrip { get; set; }
        public DateTime ItemCreated { get; set; }
      
    }
}

 

Things you might want to consider when making use of this example:

 

The test.html and .xap file is being hosted inside SharePoint.  In this case I just dropped on the SP Site at the root site level via SharePoint Designer.

 

For a quick way to databind the XML returned from the SharePoint list to XAML I initially used listbox and a data item template.

 

Summary:

 

The URL protocol is just one more option for accessing the data in your user's SharePoint lists and web client class in Silverlight provides a mechanism to use the list data inside your Silverlight applications hosted in SharePoint.

 

Rod Stagg http://www.rstagg.com
SharePoint Solutions Architect
Allyis Inc. Kirkland Wa
http://www.Allyis.com

More Web Part goodness

We recently published a pretty cool post about Web Parts, and this post offers some more Web Part goodness.

  • If you haven’t already seen it, I highly recommend checking out Mark Miller’s post What is JQuery and Why Should I Care? This post features some great information and links that will help you learn how to do things like enable site visitors to manually resize the Web Parts on your page.
  • We’ve also recently published another excerpt from Robert Bogue’s The SharePoint Shepherd’s Guide for End Users on Office Online. Bogue’s article Move Web Parts on a Publishing site will help new SharePoint users get up to speed with page design tasks like rearranging Web Parts.
  • Finally, here’s something for the truly ambitious. In Subscribe to SharePoint Web Parts using Internet Explorer 8 Web Slices, John Powell explains how you can build a Web Part that supports  the new Web Slices feature in Microsoft Internet Explore 8. With Web Slices, you can subscribe to a section of a Web Page and receive notifications when content changes.

To make it easier for you to find additional Web Part content on this blog, I have just created a new Web Parts category. I hope you find these links useful in your adventures with SharePoint.

Thanks,

Laura

SharePoint End User Content Team

 

 

 

 

What is jQuery and Why Should I Care?

About two months ago, I started experimenting with Scriptaculous to see how I could extend the SharePoint interface without having to hack masterpages and .asp pages. I got some basic AJAX functionality going and thought I was pretty cool. Then Paul Grenier from Stump the Panel stepped in and said since I was working with Scriptaculous, he’d start experimenting with jQuery. The rest is history…

Paul is now one of the premier jQuery proponents in the SharePoint community. He is authoring five articles a week, showing SharePoint power users how to do everything from turning interface components on and off, to fixing configured web part height. This isn’t basic End User stuff to create, but he does make it simple for anyone to implement by providing cut-and-paste code that can be pasted into a Content Editor Web Part (CEWP), ready to upload to a SharePoint web page.

jQuery: An Overview

So what’s all this talk about jQuery. What is it and why should you slow down and take a look.

To get started, let’s take a quote from the jQuery playbook:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

So, jQuery is a script that you put on your site in a document library. You don’t need to install it at the server level.  When you need specific functionality, such as to have a rotating set of images, use a Content Editor Web Part to embed the call to the jQuery library and implement that function from the library.

Here’s a quick example. Everyone wants an FAQ on their site, but it takes up so much space, it has to be spread over a couple pages. With jQuery, you can put all the Q&A on one page, hide all the answers and expose answers when a user clicks on a question.

Paul uses  jQuery to put resizing handles on all the web parts on a page so your End User can expand and contract the web part area, depending upon how much content is being exposed. You’d think that would be a major development effort, right?

Nope… go to jQuery for Everyone, choose a subject that interests you, paste the code into a CEWP and put it on your page. It should take you all of three minutes. Now THAT’S something you can use right away.

Summary

That should get you pretty excited about jQuery. Check out a couple more of Paul’s articles. When you get a little braver, pop open a Content Editor Web Part and try out one of his solutions. You’ll be shocked at how powerful it is and what you can do.

Don’t believe me? Here’s what Mike Gannotti had to say about Paul’s article on Dynamically Sizing Excel Web Parts:

Read the post for page viewer part first then this. Two of the most useful posts I have seen around for a while. Great work! – Michael Gannotti

So get to it! You’ll have more fun than you’ve had in a while.

Regards,
Mark

Mark Miller
Founder and Editor
EndUserSharePoint.com

Resources from this Article

·         Scriptaculous -http://script.aculo.us/

·         jQuery - http://jquery.com/

·         Paul Grenier “jQuery for Everyone” Articles at EndUserSharePoint” - http://www.endusersharepoint.com/?s=jQuery+for+Everyone

·         Stump the Panel: SharePoint Q&A - http://www.endusersharepoint.com/STP

·         Mike Gannotti - http://sharepoint.microsoft.com/blogs/mikeg/

About the Author

Mark Miller is founder and editor of one of the largest, online SharePoint communities for End Users and Information Workers, EndUserSharePoint.com. His focus is on out-of-the-box functionality of SharePoint. The site provides Information Workers and End Users with immediate solutions to typical business problems that can be solved with SharePoint.

Adding JavaScript Tabs to SharePoint
jQuery TabsOne of the most under-utilized web parts by designers inside SharePoint has to be the content editor web part.  The reason why it's so powerful is because it allows us to embed any markup we want right in the page. We will utilize this web part as well as adding some markup with SharePoint Designer to add some functionality to our SharePoint site.
 
Using the Content Editor Web Part
 
Whether you're using MOSS or WSS you can do this tutorial. All you need is a web part zone in a page.
  1. Simply click to add a web part and choose the content editor web part (I'll be doing so in the right-hand side of the page).
  2. Then, in the content editor web part, click the link to "open the tool pane."
  3. Then, click the Source Editor button and paste in the following HTML.

(It includes some example information for conference participants.)

<div id="topsidebar">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>Hotel</span></a></li>
<li class=""><a href="#fragment-2"><span>Contact</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide">
<p>Here are details corresponding to the hotel attendees will be staying at:</p>
<p><a href=http://example.com/>Example Hotel</a><br /> One Microsoft Way, Redmond, WA 98052<br /> Tel: 1.555.555.5555 Fax: 1-555-555-5556</p>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Contact the following for details about the conference:</p> <p>Chris Poteet<br /> <a href=mailto:chris.poteet@example.com>Chris Poteet's E-mail</a><br />555.555.5555</p>
</div>
</div>

When you're done, click OK to exit the Tool Pane, and if you're using WSS then click Exit Edit Mode on the page. If you're using a MOSS publishing page then click the Publish button.

Downloading the jQuery Goodness

Then we need to add both the jQuery framework and jQuery UI which is a framework built on top of jQuery for accomplishing common DHTML functionality.  I have included a ZIP file for you with the necessary JavaScript files. I suggest unzipping this file to the desktop.

Once you have downloaded the files we need to put them on our site. Open your site in SharePoint Designer and expand the _catalogs -> masterpage folder. Drag both JavaScript files into the masterpage folder. Then you may have to check in both as major versions by right-clicking on the files and Check In. (You might also be prompted for content approval which will take you to the master page library to approve the documents.)

Adding References in Our Master Page

Now we need to add references to our JavaScript files as well as instantiate our tabs. Then you will need to add the following to reference the two libraries in the <head> section of your master page.

<script type="text/javascript" src="/_catalogs/masterpage/jquery.js"></script>
<script type="text/javascript" src="/_catalogs/masterpage/jquery-ui.js"></script>

Then we use the following to instantiate our tabs. The document.ready() function allows jQuery to run after the DOM has rendered, and the next line turns on the tabs for the unordered list right beneath the topsidebar div. I decided to use a nice toggle to switch between tabs. This goes inside the <head> after the references we added above.

<script type="text/javascript">
 jQuery(document).ready(function() {
  jQuery("#topsidebar > ul").tabs({
      fx: {
          opacity: "toggle"
      }
  });
 });
 </script>

Adding the CSS

Since DHTML is truly the alteration of the DOM through mostly CSS changes we need to use CSS to hide/show elements in the tabs. Check out your custom CSS file, and then add the following. (If you don't have a custom CSS file reference this post by Microsoft on how to do so.)

/* Conference Welcome Page */

.ui-tabs-hide {
 display: none;
}
ul.ui-tabs-nav {
 margin: 0;
 padding: 8px 0 0 0;
}
ul.ui-tabs-nav li {
 list-style: none;
 margin: 0;
 display: inline;
 font-size: 12px;
}
ul.ui-tabs-nav li a {
 padding: 5px;
 margin-right: 3px;
 border-bottom: none;
 text-decoration: none;
 color: #000000;
 text-transform:uppercase;
}
ul.ui-tabs-nav li a:hover {
 color: #000;
 background: #F1EEE7;
 text-decoration: none;
}
.ui-tabs-selected a {
 background-color: #F1EEE7!important; 
}
ul.ui-tabs-nav li.ui-tabs-unselect a {
 background-color: #F1EEE7;
}
ul.ui-tabs-nav li.ui-tabs-unselect a:hover {
 color: #333;
 background-color: #F1EEE7;
}
.ui-tabs-panel {
 background-color: #F1EEE7;
 padding: 5px;
 line-height: 18px;
}
.ui-tabs-panel ul {
 margin-left: 0;
}
.ui-tabs-panel ul li  {
 background-color: #F1EEE7;
 border-bottom: 1px solid #fff; 
 padding: 5px 0 6px 20px;
}

You're Done!

You've now added some slick tabs to your SharePoint site. There are a multitude of options inside the jQuery UI tabs documentation. Also be sure to change the CSS to match whatever color scheme your SharePoint site uses.

Chris Poteet is a SharePoint consultant for Mixon Consulting with a focus on business analysis, and enterprise information architecture. He also has been involved in user experience and interface designs for over a decade. You can also follow him at his blog at www.siolon.com.

Add navigation buttons to your SharePoint site

By Janis Hall of Mindsharp

Ok... so you’ve done it, you’ve dared to click the ‘Add Web Part’ button and have ‘ooohhed’ and ‘ahhhed’ at the enormous list of available Web Parts.J  Of course, each Web Part provides its own special function that can lend support to how content is displayed on your site.  Through trial and error I have spent time learning functionality of available Web Parts.  Over time-- and with some creative application ;) --I have also learned alternate uses to some of the commonly used ones.   Probably my favorite, or at least the one I use most often, is the Content Editor Web Part (CEWP).  I use this Web Part for a variety of different things such as for the creation of site banners and as a broadcast tool, which I’ll write about in my next blog.  I also use the CEWP to create navigational buttons: 

Sample buttons

Buttons are another way we can provide intuitive navigation for our site users.

Situations where use of buttons may be appropriate:

  • To provide easy access to other related SharePoint sites (that may be several clicks away).  For example, when implementing sites, you may choose to add a help button that links to a Technical FAQ Wiki.
  • To provide navigation in a Web Part Page (WPP).  Unless we access the code and ‘unblock’ the Quick Launch bar we don’t get that navigational tool in a Web Part Page.  Using breadcrumbs to navigate out of a WPP can also be confusing to novice SharePoint users, because the breadcrumbs (of course) map to the library holding this file.   Because of this, whenever I create a WPP I like to give users a ‘home’ button to give them easy access back to where they came from.

WPP Home button

  • To provide links into specific list and library views.  Remember when you change views in a list or library, the URL also changes.  You can use that path to provide users a link directly to a filtered view-- for example, to provide a view of items that have been recently added --or to provide direct access a new list item form.

Button link to a list view

  • To provide access to an external site or a network directory.  If you have an address for it, you can link to it (it doesn’t have to be another SharePoint site).

The point is to provide your site users with navigation that is intuitive and easy to use.  Buttons certainly fit the bill on both criteria.  Ok, have I sparked your interest yet?  The below steps will demonstrate how you use a CEWP to add a button to your page:

*Note: To create a button using the CEWP, you’ll need to begin by uploading the graphic you want to use as a button, to a SharePoint library.  The steps below assume that you have already taken this action.  * A friendly reminder, make sure those accessing the site displaying the button, have at least ‘read’ access to the image file. J

To create a button using a CEWP:

1.     On the site where you wish to add the button, click Site Actions then Edit Page.

2.      Click Add a Web Part.

3.      Select and add a Content Editor Web Part (displayed under the Miscellaneous category).

4.      To configure your new Web Part, click on the Edit drop-down and select the option Modify Shared Web Part.

Modify Shared Web Part 

5.      In the Properties box (displayed on the right hand side of your screen), click on the Rich Text Editor button.

      Opening Rich Text Editor

6.      In the HTML Editor box that appears, click the Insert Image icon. Insert Image icon

Location of Insert Image icon

 

7.      In the Edit Image Properties window enter the path to the image, or use the browse button to navigate to, select, and add the image.

      Edit Image Properties

8.      In the HTML Editor window, click the image (that you just added to your CEWP) to select it.

      HTML Editor

9.      Use the Insert Hyperlink icon in the toolbar to map a destination path.

     Insert Hyperlink

10.  Either browse to a location within your site collection, or type (or paste) in a path.

Enter URL path

11.  Click OK to accept the path.

12.  Click OK again to exit the HTML Editor window.

13.  Turn off the chrome (you probably don’t want a title for your button), by expanding the Appearance section of the Web Part Properties box, and change Chrome Type to None.

     Set Chrome Type to None

14.  Click OK at the bottom of the Web Part Properties box.

15. Click Exit Edit Mode.

You now have a new button- Congratulations! J

 

 Happy ‘SharePointing’

 

Janis Hall of Mindsharp

Janis Hall is the End User/Site Owner Courseware lead and an Instructor at Mindsharp.

Connecting Business Data Web Parts to display product details

Would you like to display business data on your portal site without writing any code?  Microsoft Office SharePoint Server 2007 includes five default business data web parts that allow you to do just that. As an example of how to work with business data web parts, I would like to demonstrate how to display products from a SQL Server database, and their details, by adding and connecting a Business Data List and Business Data Item Web Part.
 

Important:
If you would like to mirror the steps here on your own, be sure to register the
AdventureWorksDW SQL Server 2005 Sample in the Business Data Catalog.

The process is divided into 3 major steps.

1.       Add a Business Data List Web Part to a SharePoint page.

2.       Add a Business Data Item Web Part to the same page.

3.       Connect the two web parts.

To add a Business Data List Web Part

1.       I open the Microsoft Office SharePoint Server 2007 page where I want to add the Web Part.

                

2.       I click Add a Web Part in the area in which I want to display the Web Part and in the Add Web Parts - Web Page dialog box, I select Business Data List and then I click Add.

3.       In the Business Data List Web Part that I just added, I click Open the tool pane, click Browse, and I choose Product (AdventureWorksDWInstance) and click OK.

 

4.       Next, I expand the Appearance section and for Title, I replace Business Data List with Products from AdventureWorks, and then I click OK.

   

5.      On the right side of the newly added Web Part, I click Edit View and in Items to Retrieve, I select Retrieve all items.

6.       In Columns, I select Name and List Price, for example, and then I click OK.

7.   The new Business Data List Web Part now displays products from the AdventureWorksDW 2005 SQL Server database.

To add a Business Data Item Web Part

1.      On the same page that contains the Business Data List Item Web Part, I click Add a Web Part in the zone in which I want to display the Web Part, I select Business Data Item Web Part and then I click Add.

 

2.      In the Business Data Item Web Part that I just added, I click Open the tool pane, I click Browse and choose Product (AdventureWorksDWInstance), and then I click OK.

3.      In Item, I click Browse to choose the product to display and in the Picker dialog box, I choose the Name filter. In the adjacent field, I type the word bike and click Go to search for products whose names contain bike.

4.   The Picker dialog box displays five products from the AdventureWorksDW database and I select one item from the list and then click OK.

 

5.      In the Fields section I click Choose, and since I want all details for any given product to display in the Web Part, I select most of the check boxes and click OK.

6.    I expand the Appearance section and replace the Title with Featured Product from AdventureWorks, and then I click OK.

7.   The The new Business Data Item Web Part now displays a product from the AdventureWorksDW 2005 SQL Server database.

To connect the two Business Data Web Parts

  1. In Edit Mode, on the Featured Product from AdventureWorks Web Part, I click Edit, then Connections, then Get Item From, and then I click Products from AdventureWorks.
  2. After I exit Edit Mode, when I select a product from the Products from AdventureWorks Web Part, details of the product are displayed in the Featured Product from AdventuresWorks Web Part.

Cris
SharePoint End-User Content Team
Microsoft