Friday, September 19, 2008

Calling a javascript function while loading default.aspx

There are different techniques available to call a javascript function in a sharepoint page. Following is one of the feasible solution. The idea is to include the external javascript file reference in the master page of the site and include it in the onload event of the BODY tag. Just follow the below simple steps to do this - may be only for beginners ;).

1.Create a Javascript file named myScript.js.

2.Add a simple javascript function like this.
function myFunction()
{
alert("alert from myFunction.");
}

3.Place the file into C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS folder.

4.Open the site where you need to call the function.

5.Activate the "Office SharePoint Server Publishing" feature to enable selecting masterpage. By going to "SiteSettings-->Site features" option under the "Site Administration" section. Click on the "Activate" button besides the "Office SharePoint Server Publishing" feature.
[if you get the error "One or more features must be turned on before this feature can be activated." you need to activate the "Office SharePoint Server Publishing Infrastructure" in site collection level]

6.Go to site settings and click on the "Master pages and page layouts" link under the Galleries section.

7.Select default.aspx and click on the "Edit in Microsoft SharePoint Designer" link from the context menu.

8.Click on File-->SaveUs from SharePoint Designer and save the default.master as TestJavaScript.master

9.Do some changes to differentiate this file from default.master (eg: removing the welcome links or applying different .css classes)

10.Find the body tag of the master page, it should look something similar to (i am including the "_" with the HTML tags to avoid the blogger interpreting it as HTML)
<_body scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">

11.Add a reference to our new javascript file just above the BODY tag.
<_script type="text/javascript" src="_layouts/myScript.js"> <_script>

12.Now...just add our function name to the onload event like this and save the file.
<_body scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();myFunction();">

13.Right click the "TestJavaScript1.master" from the left navigator(Folder List) and click on "Check in". Choose the "Publish a major version" option and click Ok button.

14.Click on Yes in the approval dialog box. Master page gallery will open. Select the TestJavaScript file and click on Approve/reject from the context menu. Select "Approve" option and click on OK button.

15.Its almost done. Now we just need to select the "TestJavaScript.master". Go to "SiteSettings-->MasterPage" option under the "Look and Feel" section and select the "TestJavaScript.master" from Site MasterPage and SystemMasterPage sections.

16.Go to the homepage of the site you should be getting the popup message "alert from myFunction."

No comments: