Customize or Override core.js file functions in Sharepoint


Core.js JScript file located @ 12 or 14 hive , depending upon the SharePoint version installed on a system, provides several in-built javascript functions. This is an out-of-box aka OOB sharepoint file.
[12/14 hive is @ %PROGRAMFILES%\Common Files\Microsoft Shared\Web Server Extensions\]

These functions are invoked internally by OOB visual webparts in sharepoint.

For e.g.,
Any Document library View page listing all items, hosted in a sharepoint site, references core.js file. Functions may get invoked when a user hovers any item name column or when an Add New Item link is clicked.

You may be thinking about the scenarios where you may need to customize a function defined in core.js file.

Where\Why?
There can be many. Yes. One of them which i faced is related to Browser compatibility.

  • Add modal pop up opening as a full page
  • On XP SP3 build’ IE7, a javascript error was thrown on clicking “Add New Item”. Due to this, an AddItem page was opening as a full page rather than a modal pop-up. This was not even reproducible on IE9 running into IE7 compatibilty and document mode.
    The faulty function was: function UseDialogsForFormsPages(c){…}

    You may face other problems but cause could be the same.

Note: However, my recommendation is NOT to OVERWRITE the core.js.

You may now be confused. Many questions may be coming into your mind – What is the purpose of this blog then?, How should i achieve if i ever need to?

Well, i recommended not to overwrite core.js. The reason being that this is OOB file and may get modified in the next version of sharepoint.
What you should do is provide a method override. Another javascript function which has a same prototype but a body definition as per your requirements.

This is how you should do.

How?

  1. Create a separate js file, say CustomCore.js
  2. Provide a method override of faulty function, say function UseDialogsForFormsPages(c){…} in CustomCore.js
  3. This will hide the same function definitions declared on top of this definition, if any.

  4. Deploy this javascript file relative to a correct Hive 12 or 14 as a part of solution deployment, say to ~/_layouts/js/
  5. Include core.js and CustomCore.js explicitly either on your page or in your master page
  6. This is important. Without this, whatever you did earlier, all will go in vain.
    You can declare $lt;Sharepoint:ScriptLink> tag to achieve this same.


    <Sharepoint:ScriptLink ID="ScriptLinkCore" language="javascript" name="core.js" Defer="true" runat="server"/>
    <Sharepoint:ScriptLink ID="ScriptLinkCustomCore" language="javascript" name="~/_layouts/js/customcore.js" Defer="true" runat="server"/>

Why does the above trick work?
The reason being that if a same javascript function is defined more than once on a page then the last definition of a javascript function is used.

For e.g. if your Page SomePage.aspx has a following html


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function SomeFunction() {
alert('First defnition');
}
</script>
<script src="someSourceUrlGoesHere" type="text/javascript" /> <!--defining SomeFunction()-->
<script type="text/javascript">
function SomeFunction() {
alert('Second defnition');
}
</script>
</body>
</html>

You will see an alert with a message ‘Second Definition’ if javascript:SomeFunction() is invoked from anywhere on a page.
Using the above approach, you just need to define a faulty function in your custom javascript file and you are all set.

Possible Errors

  1. Behavior is still the same
    • Resolution:

    • Verify if your custom js file is deployed
    • Verify that your changes in a page/master page referring core.js and custom.js is deployed
    • Clear the browser cache
Advertisements

About Sunil Singhal

A human being whose dreams are tied to a Horse that will never tire
This entry was posted in Javascript, Sharepoint, Technical and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s