customization of core.js file in SharePoint

  • Article

If any situation you want to customize the out-of-the-box Core.JS file and if you customized that file directly, it will put you in an unsupported scenario.

If you customize the original core.js then it will affect all SharePoint sites under that particular SharePoint server, also it may affect any future upgrades. So in a safer side, do not customize the core.js file directly.

In order to avoid all those kind of issues which I have mentioned above, we can use a work around which is - use a custom master page to that particular site collection and override the core.js file instead of using the original one. Below I am giving the steps that you need to follow to accomplish the same.

1. Copy the core.js file from C:\program files\common files\Microsoft shared\web server extensions\12\Template\layouts\1033 and paste it in to the same folder with a different name, say for eg: customcore.js.

2. Customize the customcore.js as per your requirement.

3. If you are using the default.master page as the master page in your SharePoint site, then make a copy of the default.master page

from the following location,

C:\Program Files\Common Files\Microsoft Shared\web server

extensions\12\TEMPLATE\GLOBAL,

and rename it as custom.master.

4. In the custom master page add the following line to render the customcore.js file (we must need to keep a reference to the original core.js file in this custom master page, Defer=”true” property is used to override the original core.js file)

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>

<SharePoint:ScriptLink language="javascript" name="customcore.js" Defer="true" runat="server"/>

5. Save the custom.master page and upload it to the master pages gallery of the site. Apply the custom.master page as the default master page for the site.

 

Since java script is a dynamic language, allows you to redefine functions very easily.

For eg: you can just create a HTML file with the following java script functions, if you run this , then you can see that it will call the second function.

test() { alert(1); };

test () { alert(2); };

test (); // alerts '2' // overriding

 

Defer = “true” is used to specify the load order. (While loading, those two java script files will merge together)

As a result, to override any functions in core.js, you must include a <script /> tag with the DEFER attribute "after" the core.js file in the source of the document. This ensures that when deferred scripts are executed, they are executed in order. First core.js is executed then our override java script file. The upside one is not modifying core.js and breaking supportability, the downside is transmitting down twice the amount of script for the same function.

The important point you need to remember is that, you need keep only the methods which you are going to customize in the custom core.js file. And in future if you upgrade the product or install any patch, then you can cross check only those methods with the methods in the original core.js for any changes. So, after any update that affects core.js, it might be a good idea to review any patches that has been applied this way to see if they are still applicable.