Wednesday, July 25, 2007

Adding External Javascript files into SharePoint

Hey folks,
This is a quick helpful explanation of adding script files into SharePoint (WSS 3.0/MOSS 07. Let's jump right into some theory.

WSS 3.0 keeps all of it's external script files in 12/Templates/Layouts/1033. This localized managed path hosts common file such as "core.js" and other external resources. It's becoming a common task to include custom JavaScript in SharePoint pages that is registered. One of the "nifty" controls that WSS 3.0 offers is the SharePoint ScriptLink control (< SharePoint:Link />), this control allows a developer to link to external script file living in the localized managed path. Here's a practical example that should shed some light on the subject:

1.) Include the following in an external javascript file named "batman.js".


document.write("I am the night.");


2.) Copy "batman.js" to 12/Templates/Layouts/1033.

3.) Now add the following control to the head of your masterpage:

< SharePoint:Link ID="Batman" language="javascript" name="batman.js" />


That's it! Just upload the masterpage into the masterpages gallery and you should see "I am the night" printed on your pages every time they load. This control will become very useful when you begin to use new technologies like "Silverlight" or integrating the "oh so holy" Flash into SharePoint.

Hope this helps,
~:)

That's it

9 comments:

Bugs said...

Hi Eric,

Your code sample doesn't work unfortunately. I think what you was actually referring to is the SharePoint:ScriptLink control, not just a Link control

leah said...

I tried this and you're right, it should be scriptlink

Johan said...

Great post!!!

Thanks

Steve Walsh said...

Hey Eric, I am trying to reference a javascript file in a Page Layout. But the javascript is ot be stored in the document library of this site, since I will have lets say 10 subsites using 10 different javascript files... So

subsite1 will use /subsite1/Documents/slide.js
subsite2 will use /subsite2/Documents/slide.js
subsite3 will use /subsite3/Documents/slide.js

etc

But I cannot ifnd out how to reference this JS file. I tried:

$SPUrl:~Site/Documents/slide.js%

But this then gives me: "Cannot make a cache safe URL for "/research/evpl/Documents/slide.js", file not found. Please verify that the file exists under the layouts directory."

Any ideas??

Anonymous said...

For some reason, Sharepoint want's me to log in on the site, when I add javascript file with SharePoint:ScriptLink control. Any reasons why??

sharepointnovice said...

I am a sharepoint novice as this question indicates. Where is the 12/Templates/Layouts/1033 directory located to copy my java script into??

Thanks!!!

Jason Robertson said...

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033

Just to contribute

Gaurav Kanwar said...
This post has been removed by the author.
Anonymous said...

The command should be:

SharePoint:ScriptLink ID="Batman" language="javascript" name="batman.js" runat="server"