How to Use Prototype and Script.aculo.us in SharePoint

What is Script.aculo.us?

Script.aculo.us gives developers a new way to code in JavaScript by providing new shortcut functions, new powerful objects including Form, Effect, Control and Ajax, and some custom widgets. It’s an add-on to the Prototype.js JavaScript library.

What is Prototype?

Prototype by itself is a very well thought out and implemented library of JavaScript methods that helps a great deal with creating rich, highly interactive, and dynamic web pages.

The focus of this article will be to get you started using these two frameworks in your SharePoint projects. It’s really simple to do, and the frameworks themselves are not that difficult to learn.

Let’s begin:

  1. Download the files from http://www.prototypejs.org/download and http://script.aculo.us/downloads. The prototypejs download is a single file. The Script.aculo.us download is a zip archive with several files included.
  2. Extract the Script.aculo.us files to your project directory where they can be referenced. Place the prototype file there as well. In my case, I was developing a custom application page within MOSS. I placed the files in that layouts folder where my custom application pages were located.
    1
    
    C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTSCustomApplicationPages
  3. Inside your project files you only have to include 2 files. The prototype.js file and the scriptaculous.js file. The scriptaculous.js file will load all the other necessary js files for you. Within my custom application page, I added my script tags just after the main content placeholder as follows:
    1
    2
    3
    4
    5
    
    <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
     
    <script src="prototype.js" type="text/javascript"></script>
     
    <script type="text/javascript" src="scriptaculous.js"></script>
  4. Now within my custom appliation pages, I can leverage the frameworks to make my pages do some cool things. An example of how to use it:
    1
    2
    3
    
    <div onclick="new Effect.Appear('nameHelp')">Appear</div>
     
    <div id="nameHelp" style='display:none;overflow: auto;'>Some content here.</div>

This example is just a small example of what you can do. Check out the Script.aculo.us and Prototype documentation for an idea of what else is possible. If you’re having any trouble getting this going, just drop me a note.

,

3 Responses to “How to Use Prototype and Script.aculo.us in SharePoint”

  1. Erik Burger December 8, 2008 at 6:16 pm #

    Hi Shereen, Your post is exactly what I am looking for but unfortunately I am having some trouble getting Prototype to work for me. My situation is somewhat different; I am building a Webpart that contains a Usercontrol in which I want to use the Prototype library. I’ve done the following: 1. I copied the prototype.js file to the LAYOUTS directory in the 12 Hive. 2. I added to the top of my .ascx file (just below the @ directives, of course. 3. I have an asp:Panel with an ID=”searchPanel” 4. I have an asp:Button with an OnClientClick=”$(‘searchPanel’).toggle();” But this does not seem to work at all. In my page source I can see the script reference, as well as the Panel and Button (with the correct attributes) but nothing happens. Can you shed some light? Thanks in advance, Erik

  2. Erik Burger December 8, 2008 at 6:17 pm #

    Hi Shereen, I finally got the time to look further into incorporating scripting in SharePoint. I came across an interesting post here: http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/959681f1-61d4-4b11-8e43-40c793f2c2d7/ I don’t know if you knew this already but it might be interesting. We will be using the rich text editor in an internal project so I am now forced to look into JQuery (http://www.codeplex.com/jQueryScriptManager). Not too shabby but I like Prototype better :( Regards, Erik

  3. shereen December 8, 2008 at 6:17 pm #

    Hi Erik, this is very interesting. Actually, I have been reading that Microsoft is now going to include JQuery in Visual Studio and so I was going to take a little time to learn the differences between JQuery and Prototypejs. I haven’t used prototype in the scenario you described, but i’m interested to see if JQuery behaves a little differently. that link you provided definitely sheds some light on the problem. Let me know if you discover anything more.

Leave a Reply