Build Your Own School Site (part IV) -Getting Started

Trudy Hutzler   Guest Author-Trudy Hutzler

Welcome to the fourth installment of the series on my School Site, in the first three posts we walked through the site looking at all the functionality that was built into it and briefly discussed how everything fit together.  Now we get to the fun stuff, I am going to start walking through how I created each part of the school site.  I am going to create a brand new Demo site so you can follow along each step of the way and see exactly what I did to create each part.  Along the way, I will provide you with all the information and formulas you need to recreate these solutions in your own environment.  So let’s get started!
First thing we need to do is create a new site for our demo.  I am using the Team Site template as the foundation for my new School Site.  For the Title I am using “School Site-Demo”.  The URL for the Web Site Address will look something like http://<server name>/<Site name>, so mine will be http://xmas/demo.
Next, we need to add a Picture Library titled “School Pictures”, and a new Document Library called “Formulas”.  This will be where I will place all the formulas and any other files you need to recreate these solutions in your own environment.  When it is all said and done I hope to provide users with a site template they can download, and this document library will be included. Now our site is ready for us to start adding our solutions.

Default Team Site

Create site using default Team site template

For the first solution, I wanted to start with something fun.  Therefore, I decided to start with the Image-Rotator solution which can be found in the SharePoint User’s Toolkit.  The Image-Rotator allows you to display a picture on your page randomly selected from a SharePoint picture library.   The Image-Rotator is a quick and easy way to add interest to your site, catch your users’ attention, and maybe even wow the boss.  But first, we need some pictures.
Now my daughter often downloads pictures for use in reports and such, and I don’t necessarily want those to be displayed by the Image-Rotator so I need to separate the pictures I want to display from the others.   So what I did in this instance is created another Picture Library I called “Rotator Pics”.    However, for this library I chose not to display it on the quick launch.  This way the typical user will even be aware that the library is there.  To further ensure no users try anything funny with the images I used unique permissions for this library restricting everyone, but the Site Collection administrators and owners, to read permissions.  This way if they do find the library they can’t change anything.
Picutre Library Permissions

Now we have a place to store our pictures we need to upload some pictures into the folder.

 On the Action Menu click on “Upload File”.  You can either upload each picture one at a time by selecting Upload file, or you can upload several files at one time by selecting “Upload Multiple Files”.

Now that we have the library and the pictures are uploaded, we need to find the URL for the picture library to use with the Image Rotator.  For the Image Rotator we need to find the edit view URL.

  • To do this first select the view of your picture library you want to use.  The view should not contain any folders.
  • Click on the down arrow of on the View Selector, and select “Modify this View”
  • When the “Picture Library Setting –>Edit View” page opens you will want to copy the URL from the address bar.

Now browse to SharePoint User’s Toolkit, and click on the Image-Rotator link.  The Image-Rotator configuration page will open, and you simply choose the options you want to use as follows:

  • First paste the URL we just copied above into the “Picture Library (Edit View)” text box.  This tells the Image-Rotator where to find the pictures to display.
    Choose a “Picture Format”.  In my case I want the pictures to be bigger than a thumbnail image so I am going with “Optimized for web display”
  • For “Picture Size” I will stay with the default option of “Forced Height” 200 px.
  • For “Alternate Text” the Image-Rotator we can either use the Picture Name from the library, or if you have added a description to each of your pictures when adding it to the library you can choose to use the description column instead.  I am going to stick with the picture name.
  • Under the “Description” section you can choose whether to display the information stored in the Description column or not.  I don’t want to clutter up the view too much so I am choosing not to display the description.
  • The next section is “Hyperlink”.  You options here are to NOT use a hyperlink, which is what I am going to use, you can also link to the full-sized picture, or you can use a link you have specified in a text column in your picture library.

I wanted to take a moment before we continue and talk about some of the neat extras the “Hyperlink” section provides.  Let’s say you are wanting to use the Image-Rotator to attract users to your site, you could allow your users to submit some of their own photos to be displayed, then using the Link to full-sized picture option you could allow users to click on a picture they particularly liked and see it full-sized view.

On the other hand, you might want to use the Image-Rotator as part of your new product announcement plan.  You could display pictures of new products in the Image-Rotator and then by choosing the “Open link specified in the following text column” option users to click on an image and be redirected to a product information page.  To do this create a custom text column in the picture Library where you can enter the URL for the Product information page, then enter the name of the column that holds the link in the text box for this option.

The possibilities are endless once you start thinking about it, and that is why I say this particular option packs a lot of nice extras that can give your site a polished look and feel.

  • The “Refresh Frequency” option allows you to choose how often the picture changes.  You can choose change the picture only once, each time the page uploads or refreshes. This way each time the users views the page the picture will be different, but will stay the same until they leave the page.  Or you can choose to change the picture on a regular set interval.  The default is 120 seconds, but since my Image-Rotator part is only going to be used as eye-candy I want mine to change more often so I am going to set it to 15 seconds.
  • The “Display Order” section is next, and here you can choose to display the images in a random order, or in a sequential order move from one to another on down the list.  I like to mix things up a bit so I am going with random.
  • You can even choose a “Progress Icon”.  This is a small image that displays when a picture is loading to show the progress.  You can use the built-in gears icon, no progress icon at all, or choose your own image by providing a URL where the image is stored.
  • Want to be alerted if there is an error with the Image-Rotator?  Then check the “Debugging” box to get alert messages on errors.
  • Finally you need to accept the license terms by Checking the ” I have read, understood, and I agree to the license terms.” box.  This is a free license folks, so no worries about checking the box.

Now that you have agreed to the terms the code for the Image-Rotator, including all the options you select will be visible in the text box at the bottom of the page.  To save the code to a text file click on the “Save To Disk” button which will save the code in a text file.  The default file name is “ImageRotator-2.0.txt”, but you can clear out the name and give it whatever name you like, such as “KentRotator.txt”.

Now we have our code, so let’s put it to use.  I want to replace the standard picture that comes with the default Team site template with my Image-Rotator so first I need to get rid of that picture.

  • Open up the SharePoint page where you want to display the Image-Rotator.
  • Next click on the “Page” tab of the ribbon and then click on “Edit” which will be the very first icon.
  • Click on the image to select it, then press the delete key

Now your site will look like the figure below.  Notice the large picture is now missing, and in its place, we will deploy our Image-Rotator.

Follow the steps below to deploy your Image-Rotator:

  • Open up the SharePoint page where you want to display the Image-Rotator.
  • Click on Site Actions –> View All Site Content
  • Once the “All Site Content” page opens look for Site Assets under Document Libraries, and click on it.
  • Click on the “Add New Document” link, this will open the Upload document dialog box.
  • Click on the Browse button to browse to the location where you saved your code text file.
  • Once the file has been uploaded click on the file to open it.
  • A message box may open asking you if you want to open the file as “Read Only” or “Edit” choose “Read Only” then click OK
  • This will open the file in a browser window.  Copy the URL form the address bar.
  • Then click the back button until you return to your site page.

The next part of deploying the Image-Rotator is to add a Content Editor Web Part to the page.  To do so follow these steps:

  • Browse to the page where you want to deploy the Image Rotator
  • Next click on the “Page” tab of the ribbon and then click on “Edit” which will be the very first icon.
  • Go to the web part zone where you want to display your images and place you cursor where you want to insert the CEWP
  • On the Ribbon, under the “Editing Tools” tab, click on “Insert”
  • Next on the Insert Ribbon, click on Web Parts which is part of the Web Parts group on the ribbon.
  • Under Categories select the Media and Content folder
  • Then under Web Parts select the Content Editor
  • Then click the Add Button.  This will add the CEWP to the page in the same place that your cursor was placed.


Now you are back on your page, still in Edit mode.

  • Select the Content Editor you just added and click on the down arrow
  • Select Edit Web Part

  • When the Web Part Editor opens paste the URL for the code text file we copied in the Content Link box.
  • Expand the Title section
  • Add in a title that will display above the images.  I am using “Kent State-You Belong Here!”
  • Leave the Height and Width section set to their default selections.
  • And for a cleaner look on the page I have set the Chrome Type to “None”
  • Then click on the OK button to save your changes.
  • You will now be taken back to the page, still in edit mode.  You will see the CEWP with its new Title but no pictures yet.
  • On the ribbon, click on the “Page” tab
  • Then click on “Save” which will be the very first icon

Once the page is saved and refreshed you should start to see your pictures in our new web part.

So we now have a little WOW factor added to our site, something to attract the users attention and get them looking around.  You can easily change things up by adding, changing, or deleting the pictures stored in the picture library.  You can also make changes to the options you selected by returning to the Image-Rotator page in the SharePoint User’s Toolkit and making different selections.  Then save the file to disk using the same name as you did above.  Finally upload the new text file to the Site Assets library, overwriting the original file.  The changes will take effect as soon as you refresh your page.

As we discussed earlier you can use the Image-Rotator part in a variety of different ways.  You can use it to promote new products, make SharePoint feel more like a community by displaying photos submitted by users, or just display picutres from the last office party.  The possiblities are endless!  How will you use the Image-Rotator?  I would love to hear from readers about the different ways you have put the Image-Rotator to use.  And stay tuned for the next installement ” Tracking the What, When and Where-Customizing Contacts and Calendar”

Client side scripts: packaged Web Part vs. Content Editor Web Part

A couple days ago, there was an awkward moment while I was working on a new project.

I was on a video conference with a customer who already had a SharePoint site set up – actually a whole application including CRM, project management, etc. And he was happy to show me that my Easy Tabs were part of his solution, and had been installed by his developer.

Naturally, I was interested to see if the script was implemented correctly, so I asked him to edit the Web Part. Surprise! Instead of an out of the box Content Editor Web Part (or Form Web Part, or PVWP, etc.), I discovered a custom Web Part, with no option whatsoever to edit or link to an external script.

The customer was not able to tell me what the developer had done, but apparently the guy had embedded the script in a custom Web Part. This is a standard practice, and you can for example see it explained in this recent post from the SharePoint Developer Team Blog  (one of my favorite SharePoint blogs of the moment btw). But for me, it was the first time to actually see it, and done to my very own script…

A glass of cognac and a couple nights of rest later, it is time for me to try and understand the respective benefits of the two techniques.

This is actually a topic I discussed six months ago with SharePoint MVP Sean Wallbridge (the discussion was already around the Easy Tabs). I submitted to him this idea of wrapping my Easy Tabs in a Web Part. At that time his advice was that I should not bother to do that, and that the CEWP approach was more convenient.

I’d be interested in hearing from others who have applied the technique described in the SharePoint Developer Team blog, to try and understand possible benefits. At this point, I don’t see any, but maybe I am missing some specific use cases. One interest of packaging the script is that if you update it on the server side the changes will apply to all the Web Parts. But AFAIK you can have the exact same effect by linking a CEWP to a central script.

Developer approach vs. User Managed Solution, what’s your take on this?

About Scripts, Web Parts and Urban Myths

Today, I came across conversations, initiated by Marc Anderson (@sympmarc on Twitter), about the Content Editor Web Part.

Reported by Marc on his blog:

One of the things I heard at SPTechCon several times was that in SharePoint 2010, it is no longer possible to put script into Content Editor Web Parts (CEWPs). Instead, I was told, you have to use the new HTML Form Web Part.

And on twitter:

sympmarc Just verified that you *can* put script in a #CEWP in #SP2010, contrary to what several people said at #SPTechCon . Urban myths can kill…

EUSP RT @sympmarc: Just verified that you *can* put script in a #CEWP in #SP2010 <- Problems with <form> tags in CEWP 2010.

sympmarc @eusp: Problems with <form> tags in CEWP 2010. -> Different issue. Some HTML tags may not work, but it looks like script does.

sympmarc @eusp Remember that basically the whole page is a form already. That may be the issue rather than SP2010.


Let me try and clarify how this works.

The Content Editor Web Part

It was August 2008, I had just started my blog, and I was already writing about the CEWP. At that time, I did not even mention the ability to link to external content. I only talked about this several months later, when I started promoting an architecture where scripts are stored in a central library.

In SharePoint 2007, the most advertised way to add scripts to a SharePoint page is via the “Source Editor” option of the CEWP. So no wonder people are lost when they start using SP 2010: no “Source Editor” button anymore!

It doesn’t mean that the feature has been removed though. As with many others, the option – renamed “Edit HTML source” – is now located in the ribbon, and becomes visible when you click on the content section of the CEWP (in edit mode), or select the “Edit Web Part” option:

In addition, SharePoint tries to help: it will screen the code you enter, and you’ll receive this notification:
“the HTML source you entered might have been modified”

The cool part is that SharePoint will never tell you whether anything was modified, you’re on your own to figure it out. Feel free to take a look at some examples I collected when I posted the question on SharePoint Overflow two months ago.

Another issue with the CEWP is that you cannot include form elements. This is not new to 2010, it has always been the case even with previous versions. As Marc explains in the above tweet, the reason is that the whole page is already a form. So here comes…

The HTML Form Web Part

Yes, you can use the HTML Form Web Part to include scripts in a page. Yes, it will also accept form tags, it’s its primary purpose. Yes, it has this “Source Editor” button everybody is looking for. And no, it is not a new Web Part, it was already present in SP 2007. It is actually one of the building blocks of my SharePoint User Toolkit, in both SP 2007 and SP 2010.

So why is everybody promoting the CEWP, if the HTML Form Web Part offers more?

For one, it seems that few people actually know about the capabilities of this Web Part (it is better known for its role in Web Part connections). But another reason is that it doesn’t have the “Content Link” option that I recommend as a good practice.

Other Web Parts

Can’t use the CEWP or the Form Web Part on your site? There are still other Web Parts available (not to mention the option to add scripts outside Web Parts). Although they are not as convenient as the CEWP and the HTML Form Web Part, they can help in specific cases.

For example, back in SP 2003, forms (new, display, edit) were not as easy to edit as today. I used to rely on a Page Viewer Web Part, which allowed me to modify scripts without editing the form page itself. Come talk to me if you need more details!

A new location for the SharePoint User’s Toolkit

The SharePoint User’s Toolkit has a new official page:

The old location will remain active but won’t be updated anymore.

The new site is based on SharePoint 2010 and hosted by Thanks to the support of, I expect the new site to be more reliable and offer a better user experience.

The SharePoint User’s Toolkit is a collection of tools designed to help end users build advanced customizations. It includes for example the Easy Tabs and an Image Rotator. It will continue to grow, with new tools added every month.

Regular users of the Toolkit will notice that several solutions are not in beta anymore. I haven’t actually made any changes to the code, the beta versions are becoming official simply because no issue was reported in the past few months.

Cross-Site List Snapshot, version 2.0 beta

Last year I published a simple method to display a SharePoint list in another site. I am releasing today version 2.0 beta of the jQuery script:
[09/15/2010: link updated to the new Toolkit location]

I have renamed it “snapshot”, to better reflect its (limited) capabilities. The snapshot created on another site doesn’t have all the features of the original view, for example context menus or expand/collapse buttons will not work. But at least this allows you to view the list items, and preserves the hyperlinks.

The main improvements in version 2:
– the script now works for both lists and calendars
– there won’t be any conflict if you place several scripts on the same page
– a form helps you select your options, and includes a debugging utility

How to get the script?
Fill out the form, and click on the “Save to Disk” button. Once you have your script, you can add it to a SharePoint page via a Content Editor Web Part (preferred solution: upload the text file containing the script to a SharePoint library, then link to it from the CEWP).

– if you don’t have Flash 10 installed, you won’t see the “Save to Disk” button. In this case, just copy and paste the code displayed in the text area.
– the target Web page needs to be on the same domain as the original view. If the view is on, you can display a snapshot on any page that belongs to, but not on for example.
– keep in mind that it is a beta version, for evaluation purposes.

 To report an issue, leave a comment below, or send an e-mail to

Why this script?
SharePoint doesn’t offer a convenient way to display information from a site in another site. This script gives you a workaround to accomplish this.
Other solutions:
– the Page Viewer Web Part (but doesn’t give a clean layout)
– Data View Web Part and Content Query Web Part (for advanced users, and only work within the same site collection)
– Web services and URL protocol (also for advanced users, and only work in authenticated environments)
– RSS feeds (requires you to rebuild the view on the target page)

Where can I find instructions?
The page is still under construction. For now, see last year’s article, and the context help available on the form. I’ll publish a tutorial later this month.

Quick update: Image Rotator in SharePoint 2010

Today I decided to test in SharePoint 2010 the Image Rotator I released yesterday. I just followed the instructions and filled out the form:

It worked like a charm, I didn’t notice any difference in behavior between SP 2007 and SP 2010.

Of course, we have to wait until the final SharePoint release in a few weeks to confirm it. But this is pretty good news and I couldn’t wait to share the result!

Image Rotator Lite, version 2.0 beta

After the Easy Tabs and color coding earlier this month, I am releasing today a new, beta version of the Image Rotator:

Lite means that it is written in plain JavaScript and doesn’t require any external library like jQuery. The “heavy” version, written with jQuery, allows some additional transition effects.

A key feature of this image rotator is that it takes advantage of the specificities of SharePoint libraries: instead of full size pictures, you can choose to load thumbnails or Web optimized pictures, for better performance.

What’s new in v2?

The main difference with version 1 is that you can now choose the view the rotator pulls the images from. It means that if you apply rules to a view (filtering, sorting), the rotator will follow them. See the context help in the form for details on how to select the view.

You can also choose between random and sequential for the images order.

The new version adds alt text to the images, a usability feature that was missing in version 1.

I have also included in the form a basic debugging option. If your rotator doesn’t work, include the debugging option, and (hopefully) you’ll get an error message that will help you troubleshoot the issue.

Why a copyright?

By including a license, I explicitly grant you the right to use the script without having to ask me first.

Why beta?

The new version has several new options, and testing all the variations on various browsers is time consuming. A beta version allows me to accelerate the release process and benefit from your input.
In particular, I haven’t done much on the styles (e.g. how to position the description). Feedback, ideas and sample stylesheets are welcome!
To report an issue, leave a comment below, or send an e-mail to
I have tested the script in IE7, IE8, Firefox, Chrome and Safari.

 Will it work in SharePoint 2010?

It’s too soon to tell for sure, but I expect the image rotator to work in SP 2010. A couple adjustments may be needed.

No documentation?

The page is still under construction, and I’ll add more information in the weeks to come. For information on the options, hover over the help icons on the form.

How to get the script?

Go to the Image Rotator page, fill out the form, and click on the “Save to Disk” button. Once you have your script, you can add it to a SharePoint page via a Content Editor Web Part (preferred solution: upload the text file containing the script to a SharePoint library, then link to it from the CEWP).

– if you don’t have Flash 10 installed, you won’t see the “Save to Disk” button. In this case, just copy and paste the code displayed in the text area.
–  this image rotator only works in authenticated environments. I’ll publish soon another script for anonymous users.
– the picture library needs to be on the same domain as your Web page. If the picture library is on, you can display the Image Rotator on any page that belongs to, but not on for example.
– the view of your picture library needs to be a “view without folders”.
– keep in mind that this is a beta version, for evaluation purposes.

Image Rotator Lite: your needs?

I am currently working on the next release of the Image Rotator that I plan to release this month. I have already identified a couple improvements that will make their way in the new version.

There are many image rotators available on the Web – I have built a couple myself. The interest of the one I propose is that it takes advantage of SharePoint’s built-in features to improve performance: instead of loading the full image, you can choose to use a thumbnail or a Web-optimized copy.

“Lite” refers to the script being written in plain JavaScript, without the need for additional libraries like jQuery. My other more advanced (and heavier) versions use jQuery and plugins to include transition effects (fade, slide, bounce, etc.).

What I haven’t decided yet is how to add a description for each picture. Should it be displayed below the picture? Should it just show up on mouseover? Well, your ideas are welcome! Just keep in mind that it is a “Lite” version, so don’t expect fancy effects.